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

4

5

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;

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  about-html5-video-and-audio/ about-html5-video-and-audio/  and-video-what-you-must-know/ and-video-what-you-must-know/  

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