HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012

3,256 views
3,018 views

Published on

1 Comment
3 Likes
Statistics
Notes
  • Hi Patrick, very interesting, I couldn't go, i don't understand slide 47 :), do you nkow any implementation of VAST standard in HTML5?
    Thanks a lot
    Xavi
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
3,256
On SlideShare
0
From Embeds
0
Number of Embeds
689
Actions
Shares
0
Downloads
29
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012

  1. 1. HTML5 multimediaBROWSER-NATIVE VIDEO AND AUDIOPatrick H. Lauke / DevUp / Barcelona / 27 April 2012
  2. 2. <video>
  3. 3. Adobe Flash currently most common video/audio delivery mechanism
  4. 4. <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> <embedsrc="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&fs=1&" type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true"width="425" height="344"></embed></object>
  5. 5. <video src="video.webm"></video> originally proposed by Opera in 2007 dev.opera.com/articles/view/labs-a-call-for-video-on-the-web
  6. 6. <video src="video.webm" controls autoplay muted loop preload="none|metadata|auto" poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a></video>
  7. 7. video as native object
  8. 8. people.opera.com/patrickl/experiments/webm/hover+transition
  9. 9. powerful (simple) API
  10. 10. <video> and JavaScriptvar v = document.getElementById(player);v.play()v.pause()v.volume = …v.currentTime = …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)
  11. 11. www.w3.org/2010/05/video/mediaevents.html
  12. 12. people.opera.com/patrickl/experiments/webm/basic-controls
  13. 13. HTML5 does not specifyhow browser controls should look
  14. 14. people.opera.com/patrickl/experiments/webm/fancy-controls
  15. 15. people.opera.com/patrickl/experiments/webm/fancy-swap
  16. 16. in-page video on mobile?
  17. 17. video formatsthe big debate?
  18. 18. HTML5 does not specify video container/codec (same as with images in HTML 4.01)
  19. 19. MP4/H.264 orOgg Theora orWebM/VP8
  20. 20. MP4 / H.264ubiquitous, royalty encumbered, licensing
  21. 21. Ogg Theora free and open, no licensing feesnot many tools for it, not web optimised
  22. 22. WebM / VP8 open and royalty-free, web-optimisedsupport by hardware and software vendors
  23. 23. http://tools.google.com/dlpage/webmmf
  24. 24. Browsers vs codecs Chome Firefox IE Opera Safari Ogg Theora ✔ ✔ ✔ WebM / VP8 ✔ ✔ ? ✔ MP4 / H.264 ✔ ✔ ✔mobile and devices slightly better...
  25. 25. providing multiple sources<video controls width="…" height="…"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <source src="movie.ogv" type="video/ogg"> <!-- fallback content --></video>
  26. 26. specifying codecs<video controls width="…" height="…"> <source … type=video/mp4; codecs="avc1.42E01E,mp4a.40.2"> <source … type=video/webm; codecs="vorbis,vp8"> <source … type=video/ogg; codecs="theora,vorbis"> <!-- fallback content --></video>
  27. 27. understanding fallback<video controls width="…" height="…"> <source … type=video/mp4; codecs="avc1.42E01E,mp4a.40.2"> <!-- fallback content → <p>Shown to browsers that dont support video element, and NOT just browsers that dont support MP4/H.264</p></video>
  28. 28. people.opera.com/patrickl/experiments/webm/wrongsource
  29. 29. feature-detection for codecsv.canPlayType(video/webm;codecs="vp8,vorbis") "probably" | "maybe" | "" < WAT?
  30. 30. video and Responsive Web Design<source … media="(min-width:1000px)"><source … media="(max-width:1000px)">
  31. 31. people.opera.com/patrickl/experiments/webm/mediaquery
  32. 32. people.opera.com/patrickl/experiments/webm/mediaquery
  33. 33. flash fallback for older browsers http://camendesign.com/code/video_for_everybody
  34. 34. <video controls width="…" height="…"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> <source src="movie.ogv" type="video/ogg" /> <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>
  35. 35. <audio>
  36. 36. 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>formats: MP3 vs Ogg Vorbis (vs WAV)
  37. 37. <canvas>
  38. 38. canvas also works with videoctx = canvas.getContext("2d");v = document.getElementsByTagName(video)[0];ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2);grab currently displayed frame (update as appropriate)
  39. 39. html5doctor.com/video-canvas-magic html5doctor.com/demos/video-canvas-magic/demo2.html
  40. 40. media.chikuyonok.ru/ambilight
  41. 41. is it all safe to use, right now?
  42. 42. www.youtube.com/html5
  43. 43. dont do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
  44. 44. feature-detectionprogressive enhancement, graceful degradation diveintohtml5.info/everything.html
  45. 45. feature-detection for audio/videoif (!!document.createElement(video).canPlayType;) { … }if (!!document.createElement(audio).canPlayType;) { … }
  46. 46. sublimevideo.net
  47. 47. www.jplayer.org
  48. 48. www.textfiles.com/underconstruction
  49. 49. dev.w3.org/2011/webrtc/editor/webrtc.html
  50. 50. dev.w3.org/2011/webrtc/editor/getusermedia.html
  51. 51. camera access// Operanavigator.getUserMedia({video:true},success,error);[…]video.src = stream;// WebKitnavigator.webkitGetUserMedia("video",success,error);[…]video.src = window.webkitURL.createObjectURL(stream); gUM Shield: http://html5doctor.com/getusermedia/
  52. 52. neave.com/webcam/html5
  53. 53. shinydemos.com/qr-code
  54. 54. www.opera.com/developer patrick.lauke@opera.com

×