Presentation is loading. Please wait.

Presentation is loading. Please wait.

FormatIEFirefoxOperaChromeSafari OggNo3.5+10.5+5.0+No MPEG 49.0+No 5.0+3.0+ WebMNo4.0+10.6+6.0+No FormatIE 9Firefox 3.5Opera 10.5 Chrome 3.0 Safari.

Similar presentations


Presentation on theme: "FormatIEFirefoxOperaChromeSafari OggNo3.5+10.5+5.0+No MPEG 49.0+No 5.0+3.0+ WebMNo4.0+10.6+6.0+No FormatIE 9Firefox 3.5Opera 10.5 Chrome 3.0 Safari."— Presentation transcript:

1

2

3 FormatIEFirefoxOperaChromeSafari OggNo3.5+10.5+5.0+No MPEG 49.0+No 5.0+3.0+ WebMNo4.0+10.6+6.0+No FormatIE 9Firefox 3.5Opera 10.5 Chrome 3.0 Safari 3.0 Ogg VorbisNoYes No MP3YesNo Yes WavNoYes NoYes

4 http://dev.opera.com/articles/view/introduction-html5-video/ <video src=water.mp4 width=520 height=440 controls poster=water.mp4>

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

6 Attributes: -Audio -Autoplay -Preload -Loop

7  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];

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

9  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; http://dev.opera.com/articles/view/everything-you-need-to-know-about-html5-video-and-audio/

10  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

11  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; }

12

13  http://dev.opera.com/articles/view/everything-you-need-to-know- about-html5-video-and-audio/ http://dev.opera.com/articles/view/everything-you-need-to-know- about-html5-video-and-audio/  http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio- and-video-what-you-must-know/ http://net.tutsplus.com/tutorials/html-css-techniques/html5-audio- and-video-what-you-must-know/  http://www.w3schools.com/html5/html5_video.asp http://www.w3schools.com/html5/html5_video.asp  http://news.cnet.com/8301-30685_3-20028718-264.html http://news.cnet.com/8301-30685_3-20028718-264.html

14 By, Anupam Mundale Neeraj Lulay


Download ppt "FormatIEFirefoxOperaChromeSafari OggNo3.5+10.5+5.0+No MPEG 49.0+No 5.0+3.0+ WebMNo4.0+10.6+6.0+No FormatIE 9Firefox 3.5Opera 10.5 Chrome 3.0 Safari."

Similar presentations


Ads by Google