Your SlideShare is downloading. ×
0
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Audio and Video in HTML5 - London Web Standards 20.09.2010
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Audio and Video in HTML5 - London Web Standards 20.09.2010

2,696

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,696
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
54
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. Audio and Video in HTML5 NATIVE MULTIMEDIA SUPPORT Patrick H. Lauke / London Web Standards / London / 20 September 2010
  2. HTML5 <!DOCTYPE html>
  3. “...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
  4. <video>
  5. Adobe Flash currently most 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>
  7. <video src="video.webm" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a> </video>
  8. video as native object ● “plays nice” with rest of the page ● keyboard accessibility built-in Demonstration of basic video, keyboard access, hover/transitions
  9. video formats the big debate
  10. MP4 / H.264 ubiquitous, patent encumbered, licensing/royalties
  11. Ogg Theora “free and open”, no licensing/royalties not many tools for it, not web optimised
  12. www.webmproject.org
  13. WebM open and royalty-free, web optimised
  14. www.youtube.com/html5
  15. providing multiple sources <video controls 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>
  16. still include fallback for old browsers http://camendesign.com/code/video_for_everybody
  17. <video controls 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" /> <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>
  18. powerful (simple) API to script your own controls
  19. icant.co.uk/easy-youtube
  20. www.w3.org/TR/html5/video.html#media-elements
  21. controlling a <video> element var v = document.getElementById('player'); v.play(); v.pause(); v.volume = … ; v.currentTime = … ; …
  22. 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
  23. people.opera.com/philipj/2010/07/21/html5-video-webinar/demos/track.html
  24. <audio>
  25. 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
  26. video and audio on any device without plugins (Java / Flash / Silverlight not ubiquitous)
  27. is it all safe to use, right now?
  28. don't do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
  29. feature-detection for audio/video if (!!document.createElement('video').canPlayType;) { … } if (!!document.createElement('audio').canPlayType;) { … }
  30. feature-detection for audio/video codecs var v = document.createElement('video'); if (!!(v.canPlayType)&& ((v.canPlayType('video/webm;codecs="vp8,vorbis"') == 'probably') || (v.canPlayType('video/webm;codecs="vp8, vorbis"') == 'maybe'))) { … }
  31. feature-detection progressive enhancement, graceful degradation – or use shims http://diveintohtml5.org/everything.html
  32. ready-made HTML5 audio/video players (for the lazy)
  33. sublimevideo.net
  34. videojs.com
  35. HTML5 as Flashkiller?
  36. not a question of HTML5 replacing Flash...
  37. giving developers a choice!
  38. www.opera.com/developer people.opera.com/patrickl/presentations/lws_20.09.2010/lws_20.09.2010.pdf patrick.lauke@opera.com

×