FormatIEFirefoxOperaChromeSafari OggNo No MPEG 49.0+No WebMNo No FormatIE 9Firefox 3.5Opera 10.5 Chrome 3.0 Safari 3.0 Ogg VorbisNoYes No MP3YesNo Yes WavNoYes NoYes

<video src=water.mp4 width=520 height=440 controls poster=water.mp4>

<video src=water.mp4 width=520 height=440 controls poster=water.mp4> SRC Width/ height Boolean attribute Poster Controls

Attributes: -Audio -Autoplay -Preload -Loop

 Allows to design your own controls Eg: Different design, playback speed, button for captions  When using your own controls, you omit the controls attribute video not supported  You can then use buttons that do something when clicked var video = document.getElementsByTagName('video')[0];

 Skip forward How to use seekbar ?  Seekbars max attribute to the videos duration var seekbar = document.getElementById('seekbar'); function setupSeekbar() { seekbar.max = video.duration; }

 Now you can make the video respond to changes to the seekbar. video.ondurationchange = setupSeekbar; function seekVideo() { video.currentTime = seekbar.value; } function updateUI() { seekbar.value = video.currentTime; } seekbar.onchange = seekVideo; video.ontimeupdate = updateUI;

 HTML 5 provides a volume and muted ideal attributes as well as the volumechange event.  Implementation of mute button var mutebutton = document.getElementById('mutebutton'); video.onvolumechange = function(e) { mutebutton.value = video.muted ? 'Muted' : 'Unmuted'; } function muteOrUnmute() { video.muted = !video.muted; }  Volume control implementation

 Use of playbackRate ideal and ratechange event var ratecontrol = document.getElementById('ratecontrol'); video.onratechange = function(e) { ratecontrol.value = video.playbackRate; } function changePlaybackRate() { video.playbackRate = ratecontrol.value; }

 about-html5-video-and-audio/ about-html5-video-and-audio/  and-video-what-you-must-know/ and-video-what-you-must-know/  

By, Anupam Mundale Neeraj Lulay