audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
5 likes1,547 views
The document discusses HTML5's native multimedia support, emphasizing the use of video, audio, and canvas elements, and compares them with technologies like Flash. It highlights the importance of providing multiple video formats and fallback options for older browsers, addressing accessibility and control through JavaScript. Additionally, it promotes feature detection over browser sniffing and mentions the potential of HTML5 to offer a choice beyond Flash for developers.
![“...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/standards-next29-09-2010-100929070704-phpapp01/85/audio-video-and-canvas-in-HTML5-standards-next-Manchester-29-09-2010-3-320.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)](https://image.slidesharecdn.com/standards-next29-09-2010-100929070704-phpapp01/85/audio-video-and-canvas-in-HTML5-standards-next-Manchester-29-09-2010-27-320.jpg)
![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/standards-next29-09-2010-100929070704-phpapp01/85/audio-video-and-canvas-in-HTML5-standards-next-Manchester-29-09-2010-32-320.jpg)
audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010
- 1. audio, video and canvas in HTML5 NATIVE MULTIMEDIA SUPPORT Patrick H. Lauke / standards>next / Manchester / 29 September 2010
- 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. making your site Fonzie compliant...
- 5. <video>
- 6. Adobe Flash currently most common video delivery mechanism
- 7. <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>
- 9. <video src="video.webm" controls Autoplay Loop preload="none" poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a> </video>
- 10. video as native object ● “plays nice” with rest of the page ● keyboard accessibility built-in
- 11. video formats the big debate
- 12. MP4 / H.264 ubiquitous, patent encumbered, licensing/royalties
- 13. Ogg Theora “free and open”, no licensing/royalties not many tools for it, not web optimised
- 15. WebM open and royalty-free, web optimised
- 18. 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>
- 19. still include fallback for old browsers http://camendesign.com/code/video_for_everybody
- 20. <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>
- 21. powerful (simple) API to script your own controls
- 24. controlling a <video> element var v = document.getElementById('player'); v.play(); v.pause(); v.volume = … ; v.currentTime = … ; …
- 25. 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) …
- 26. <audio>
- 27. 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)
- 28. <canvas>
- 29. canvas = “scriptable images” <canvas width="…" height="…"></canvas>
- 30. 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);
- 31. 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
- 32. 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, … ]
- 33. canvas exporting image data as data:uri ctx = canvas.getContext("2d"); … canvas.toDataURL("image/png"); // returns "data:image/png;base64,…" canvas.toDataURL("image/jpg"); // returns "data:image/jpeg;base64,…" Note: do it on the canvas, not the context!
- 34. 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)
- 38. video, audio and canvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)
- 41. HTML5 (and friends) has lots more APIs for developers (for powerful client-side apps)
- 43. geolocation navigator.geolocation.getCurrentPosition(success, error); navigator.geolocation.watchCurrentPosition(success, error); function success(position) { /* where's Wally? */ var lat = position.coords.latitude; var long = position.coords.longitude; ... }
- 44. offline detection... window.addEventListener('online', function(){ … }, true); window.addEventListener('offline', function(){ … }, true); and application cache <html manifest=”blah.manifest”> CACHE MANIFEST # send this with correct text/cache-manifest MIME images/sprites.png scripts/common.js scripts/jquery.js styles/global.css data.xml and many more... (even beyond HTML5)
- 45. is it all safe to use, right now?
- 46. don't do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
- 48. feature-detection progressive enhancement, graceful degradation – or use shims http://diveintohtml5.org/everything.html
- 49. feature-detection for audio/video if (!!document.createElement('video').canPlayType;) { … } if (!!document.createElement('audio').canPlayType;) { … }
- 50. 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'))) { … }
- 51. ready-made HTML5 audio/video players (for the lazy)
- 52. sublimevideo.net
- 53. videojs.com
- 56. not a question of HTML5 replacing Flash...
- 57. giving developers a choice!