HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / Poznan / 14 January 2012
2 likes2,599 views
This document discusses new multimedia capabilities in HTML5, including browser-native <video>, <audio>, and <canvas> elements. It provides examples of how to use these elements to embed video and audio with controls and different formats, access camera feeds, and manipulate image data in the <canvas>. It also addresses concerns about browser support and recommends feature detection rather than browser sniffing for progressive enhancement.
![canvas access to image data array
ctx = canvas.getContext("2d");
canvasData = ctx.getImageData(x,y,w,h);
[R,G,B,A,R,G,B,A,R,G,B,A,R,G,B,A, … ]](https://image.slidesharecdn.com/meet-js14-01-2012-120114090125-phpapp02/85/HTML5-multimedia-browser-native-video-audio-and-canvas-meet-js-Summit-Poznan-14-January-2012-46-320.jpg)
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / Poznan / 14 January 2012
- 1. HTML5 multimedia BROWSER-NATIVE VIDEO, AUDIO AND CANVAS Patrick H. Lauke / meet.js Summit / Poznań / 14 January 2011
- 2. Web Evangelist at Opera
- 3. making your site Fonzie compliant...
- 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>
- 8. <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>
- 9. video as native object ● behaves like any other HTML element ● keyboard accessibility out-of-the-box
- 13. controlling <video> with JavaScript var v = document.getElementById('player'); v.play(); v.pause(); v.volume = … ; v.currentTime = … ; …
- 14. events fired by <video> 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) …
- 19. HTML5 means all your old dHTML is cool again!
- 20. video formats the big debate?
- 21. HTML5 does not specify video container/codec (same as with images in HTML 4.01)
- 22. MP4/H.264 or Ogg Theora or WebM/VP8
- 23. MP4 / H.264 ubiquitous, patent encumbered, licensing/royalties
- 24. Ogg Theora free and open, no licensing fees not many tools for it, not web optimised
- 25. WebM / VP8 open and royalty-free, web-optimised support by hardware and software vendors
- 26. 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>
- 27. 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>
- 28. feature-detection for codecs v.canPlayType('video/webm;codecs="vp8,vorbis"') "probably" | "maybe" | ""
- 30. www.ffmpeg.org
- 32. flash fallback for older browsers http://camendesign.com/code/video_for_everybody
- 33. <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>
- 34. <audio>
- 35. 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)
- 38. no need for <audio> in your document var s = document.createElement('audio'); s.src = 'aaargh.oga'; s.play(); (same for video as well, if you're crazy...)
- 39. <canvas>
- 40. canvas = “scriptable images” <canvas width="…" height="…"></canvas>
- 41. canvas has standard API methods for drawing ctx = canvas.getContext("2d"); ctx.fillRect(x, y, width, height); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x, y); ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2); … www.w3.org/TR/2dcontext
- 44. canvas drawing ready-made images ctx = canvas.getContext("2d"); var logo = new Image(); logo.src = 'logo.png'; ctx.drawImage(logo,x1,y1,w1,h1,x2,y2,w2,h2); or call in an existing image already on the page
- 46. canvas access to image data array ctx = canvas.getContext("2d"); canvasData = ctx.getImageData(x,y,w,h); [R,G,B,A,R,G,B,A,R,G,B,A,R,G,B,A, … ]
- 49. canvas also works with video ctx = canvas.getContext("2d"); v = document.getElementById('player'); ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2); grab currently displayed frame (update as appropriate)
- 52. is it all safe to use, right now?
- 54. don't do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
- 56. feature-detection progressive enhancement, graceful degradation diveintohtml5.info/everything.html
- 57. feature-detection for audio/video if (!!document.createElement('video').canPlayType;) { … } if (!!document.createElement('audio').canPlayType;) { … }
- 58. sublimevideo.net
- 59. www.jplayer.org
- 68. not a question of HTML5 replacing Flash...
- 69. giving developers a choice!
- 70. www.opera.com/developer patrick.lauke@opera.com