Downloaded 61 times
![“...extending the language to better
support Web applications [...] This puts
HTML in direct competition with other
technologies[...] , in particular Flash and
Silverlight.”
Ian Hickson, Editor of HTML5
http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html](https://image.slidesharecdn.com/lws20-09-2010-100922063706-phpapp02/75/Audio-and-Video-in-HTML5-London-Web-Standards-20-09-2010-3-2048.jpg)
![audio exactly the same as video
<audio src=”music.mp3” controls autoplay></audio>
[...]
<audio controls autoplay>
<source src="music.mp3" type="audio/mpeg" />
<source src="music.oga" type="audio/ogg" />
<!-- fallback content -->
</audio>
same format debacle: MP3 vs Ogg Vorbis (vs WAV)
Demonstration of basic audio, scripted audio, note about controls](https://image.slidesharecdn.com/lws20-09-2010-100922063706-phpapp02/75/Audio-and-Video-in-HTML5-London-Web-Standards-20-09-2010-27-2048.jpg)
Audio and Video in HTML5 - London Web Standards 20.09.2010
- 1. Audio and Videoin HTML5 NATIVE MULTIMEDIA SUPPORT Patrick H. Lauke / London Web Standards / London / 20 September 2010
- 2.
- 3. “...extending the languageto better support Web applications [...] This puts HTML in direct competition with other technologies[...] , in particular Flash and Silverlight.” Ian Hickson, Editor of HTML5 http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
- 4.
- 5. Adobe Flash currentlymost common video delivery mechanism
- 6. <object width="425" height="344"> <param name="movie" value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en &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&f s=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed> </object>
- 8. <video src="video.webm" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a> </video>
- 9. video as nativeobject ● “plays nice” with rest of the page ● keyboard accessibility built-in Demonstration of basic video, keyboard access, hover/transitions
- 10. video formats the big debate
- 11. MP4 / H.264 ubiquitous,patent encumbered, licensing/royalties
- 12. Ogg Theora “free andopen”, no licensing/royalties not many tools for it, not web optimised
- 13.
- 14. WebM open and royalty-free,web optimised
- 16.
- 17. providing multiple sources <videocontrols autoplay poster="…" width="…" height="…"> <source src="movie.webm" type="video/webm" /> <source src="movie.ogv" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <!-- fallback content --> </video>
- 18. still include fallbackfor old browsers http://camendesign.com/code/video_for_everybody
- 19. <video controls autoplayposter="…" width="…" height="…"> <source src="movie.webm" type="video/webm" /> <source src="movie.ogv" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <object width="…" height="…" type="application/x- shockwave-flash" data="player.swf"> <param name="movie" value="player.swf" /> <param name="flashvars" value=" … file=movie.mp4" /> <!-- fallback content --> </object> </video>
- 20. powerful (simple) API to script your own controls
- 21.
- 22.
- 23. controlling a <video>element var v = document.getElementById('player'); v.play(); v.pause(); v.volume = … ; v.currentTime = … ; …
- 24. events fired by<video> element var v = document.getElementById('player'); v.addEventListener('loadeddata', function() { … }, true) v.addEventListener('play', function() { … }, true) v.addEventListener('pause', function() { … }, true) v.addEventListener('timeupdate', function() { … }, true) v.addEventListener('ended', function() { … }, true) … Demonstration of basic and advanced video controls, swapping sources
- 25.
- 26.
- 27. audio exactly thesame as video <audio src=”music.mp3” controls autoplay></audio> [...] <audio controls autoplay> <source src="music.mp3" type="audio/mpeg" /> <source src="music.oga" type="audio/ogg" /> <!-- fallback content --> </audio> same format debacle: MP3 vs Ogg Vorbis (vs WAV) Demonstration of basic audio, scripted audio, note about controls
- 28. video and audioon any device without plugins (Java / Flash / Silverlight not ubiquitous)
- 30. is it allsafe to use, right now?
- 31. don't do browsersniffing http://www.flickr.com/photos/timdorr/2096272747/
- 33. feature-detection for audio/video if(!!document.createElement('video').canPlayType;) { … } if (!!document.createElement('audio').canPlayType;) { … }
- 34. feature-detection for audio/videocodecs var v = document.createElement('video'); if (!!(v.canPlayType)&& ((v.canPlayType('video/webm;codecs="vp8,vorbis"') == 'probably') || (v.canPlayType('video/webm;codecs="vp8, vorbis"') == 'maybe'))) { … }
- 35. feature-detection progressive enhancement, gracefuldegradation – or use shims http://diveintohtml5.org/everything.html
- 36. ready-made HTML5 audio/videoplayers (for the lazy)
- 37.
- 38.
- 39.
- 40. not a questionof HTML5 replacing Flash...
- 41. giving developers achoice!
- 42.