1 / 14

<video> <audio>

<video> <audio>. Long time ago…. Support. <Video>. <Audio>. HTML HTML5. < object width=" 425"height ="344"> < param name="movie" value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1 &"> </ param>

pippa
Download Presentation

<video> <audio>

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. <video> <audio>

  2. Long time ago…..

  3. Support <Video> <Audio>

  4. HTML HTML5 <object width="425"height="344"> <param name="movie" value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&"> </param> <param name="allowFullScreen" value="true"></param> <param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en_GB&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> </embed> </object> http://dev.opera.com/articles/view/introduction-html5-video/ <html> <body> <video src=water.mp4 width=520 height=440 controls poster=water.mp4> </video> </body> </html>

  5. <html> <body> <video src=water.mp4 width=520 height=440 controls poster=water.mp4> </video> <audio src=“Sadness.mp3" controls="controls"></audio> </body> </html> ANATOMY OF <video> <audio> SRC Width/ height Boolean attribute Poster Controls

  6. Attributes: -Audio -Autoplay -Preload -Loop What else ?

  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 src="video.ogv">video not supported</video> You can then use buttons that do something when clicked <script>var video = document.getElementsByTagName('video')[0];</script><input type="button" value="Play" onclick="video.play()"><input type="button" value="Pause" onclick="video.pause()"> own controls using DOM

  8. Skip forward How to use seekbar ? <input type="range" step="any" id="seekbar"> Seekbars max attribute to the videos duration varseekbar = document.getElementById('seekbar'); function setupSeekbar() { seekbar.max= video.duration; } Seekbar

  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/ Continued…

  10. HTML 5 provides a volume and muted ideal attributes as well as the volumechange event. Implementation of mute button <input type="button" value="Unmuted" id="mutebutton" onclick="muteOrUnmute()"> varmutebutton= document.getElementById('mutebutton'); video.onvolumechange= function(e) { mutebutton.value= video.muted ? 'Muted' : 'Unmuted'; } function muteOrUnmute() { video.muted= !video.muted; } Volume control implementation Adjust the volume

  11. Use of playbackRate ideal and ratechange event <input type="range" min="-3" max="3" value="1" id="ratecontrol" onchange="changePlaybackRate()"> <script> varratecontrol = document.getElementById('ratecontrol'); video.onratechange = function(e) { ratecontrol.value= video.playbackRate; } function changePlaybackRate() { video.playbackRate= ratecontrol.value; } </script> Fast forward, slow motion and rewind

  12. Video on Canvas

  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://www.w3schools.com/html5/html5_video.asp http://news.cnet.com/8301-30685_3-20028718-264.html References

  14. Thank You! By, AnupamMundale Neeraj Lulay

More Related