HTML 5 Video/ Audio<video src="" width="375" height="280"

controls></video>

Screenshot<video src="" width="375" height="280" controls></video>

IE 9 Google

<video src="videos/magnum.mp4" width="375" height="280" controls></video>

Video Formats.mp4.ogv

.webm

<video width="375" height="280" controls> <source src="videos/magnum.mp4" type="video/mp4"> <source src="videos/knight.ogv" type="video/ogg"> <source src="videos/hazzard." type="video/webm"> </video>

Attributes• Width• Height• Src• Poster

• Loop• Autoplay• Mute• Preload• controls

Poster

<video width="375" height="280" poster="images/penguins.jpg" controls> <source src="videos/magnum.mp4" type="video/mp4"> <source src="videos/knight.ogv" type="video/ogg"> <source src="videos/hazzard.mp4" type="video/webm"> </video>

Skins

AudioThe only way you can deliver music or any kind of audio recording right

now over the web is using a plugin like QuickTime or RealPlayer. The trouble with plugins is that they are completely user dependent. Your end user has to download and install the right plugin. With HTML5’s <audio>

tag you no longer have to worry about whether your end user has the right plugin or not. As long as you offer your files in the

popular, .mp3, .wav or .ogg formats, you will be fine.Mobile devices such as android phones do not have Flash and can not play certain embeded audio or video.

http://www.w3schools.com/tags/ref_av_dom.asphttp://www.w3schools.com/tags/tag_video.asp

<audio autoplay > <source src="videos/magnum.mp4" type="video/mp4"> <source src="videos/knight.ogv" type="video/ogg"> <source src="videos/hazzard.webm" type="video/webm"> </audio>

Without controls

With controls

Audio Formats

Audio attributes

• Autoplay• Loop• Preload• Controls• Src

Mp4 downloaderhttps://addons.mozilla.org/en-us/firefox/addon/download-youtube

/

File converterhttp://www.microvideoconverter.com

Toolshttp://www.online-convert.com/

Audio File:http://ned.highline.edu/~mmhitch/202/video/audio/reboot.mp3

Video File:http://ned.highline.edu/~vikram/202/team_assignments/videos/talkingdog.mp4

Audio js:http://ned.highline.edu/~mmhitch/202/video/audio.js

Audio css:http://ned.highline.edu/~mmhitch/202/video/audio.css

<link rel="stylesheet" href="audio.css"><script src="audio.js"></script>

<section id="skinny"> </section>

<section id="skinny"> <audio id="myAudio"> </audio> </section>

<section id="skinny"> <audio id="myAudio" controls> <source src="audio/reboot.mp3" type="audio/mp3"> <source src="audio/reboot.ogv" type="audio/ogg">

<source src="audio/reboot.webm" type="audio/webm"> </audio> </section>

</audio> <nav> <!-- control bar --> </nav> </section>

<nav> <!-- control bar --> <div id="audioButtons"> <button type="button" id="playAudioButton">Play</button> </div> </nav>

<div id="defaultAudioBAr"> <div id="progressAudioBar"></div> <!-- changes size as audio plays --> </div> <div class="clear"></div> </nav>

<audio id="myAudio" controls> <source src="audio/reboot.mp3" type="audio/mp3"> <source src="audio/reboot.ogv" type="audio/ogg"> <source src="audio/reboot.webm" type="audio/webm"> </audio>

Audio.css

body { text-align: center;}

header, section, footer, aside nav, article, hgroup { display: block;}

/**** *Audio ****/

nav { margin: 5px 0;}

#skinny { width: 200px; /* of whole player */ height: 40px; margin: 10px auto; padding: 5px; background: #2c2c29; border: 4px groove #00f900; border-radius: 10px;}

#audioButtons { float: left; width: 70px; height: 10px;}

#defaultAudioBar { position: relative; float: left; width: 90px; /* bar + button widths, dont make bigger than skin */ height: 4px; margin: 5px auto; padding: 4px; /*progress bar will show up inside here */ border: 2px solid gray; /*border around bar */ background: #c0c0c0; border-radius: 10px;}

#progressAudioBar { position: absolute; width: 0px; /* 0 by default */ height: 4px; background: #00ff00; /*color of the progress bar, size changes as audio plays */ border-radius: 10px;}

Audio.js

Change maxBarSize to match #defaultAudioBar width

Tutorialhttp://thenewboston.org/watch.php?cat=43&number=27http://thenewboston.org/watch.php?cat=43&number=28http://thenewboston.org/watch.php?cat=43&number=29http://thenewboston.org/watch.php?cat=43&number=30

Code:http://

www.tnbforum.com/viewtopic.php?f=25&t=18238