Download presentation
Presentation is loading. Please wait.
Published byOrion Hynes Modified over 10 years ago
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; }
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.