Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010
Multimedia and HTML5 There is a wealth of new functionality coming to browsers under the umbrella term of HTML5, but certainly the most talked-about is the inclusion of native media playback and the visual possibilities offered by the new canvas element. In this session we'll cover the basics of audio, video and canvas in HTML5 - mixing context and theory with simple live demos and examples that showcase the power of these new tools for developers. http://thinkvitamin.com/online-conferences/html5-nov/ Links to demos used in the presentation: http://people.opera.com/patrickl/experiments/video/basic/ http://people.opera.com/patrickl/experiments/flash-overlap/ http://people.opera.com/patrickl/experiments/flash-overlap/fixed.html http://people.opera.com/patrickl/experiments/video/hover+transition/ http://www.youtube.com/html5 http://camendesign.com/code/video_for_everybody http://camendesign.com/code/video_for_everybody/test.html http://people.opera.com/patrickl/experiments/webm/basic-controls/ http://people.opera.com/patrickl/experiments/webm/fancy-controls/ http://people.opera.com/patrickl/experiments/webm/fancy-swap/ http://people.opera.com/patrickl/experiments/audio/wilhelm/controls.html http://people.opera.com/patrickl/experiments/audio/wilhelm/ http://people.opera.com/patrickl/experiments/canvas/particle/2/ http://mariuswatz.com/works/abstract01js/index.html http://www.splintered.co.uk/experiments/archives/paranoid_0.2/ http://alteredqualia.com/canvasmol/ http://www.splintered.co.uk/experiments/archives/canvas-ambilight/ http://people.opera.com/patrickl/experiments/canvas/image-edit/ http://github.com/mezzoblue/PaintbrushJS http://html5doctor.com/video-canvas-magic/ http://media.chikuyonok.ru/ambilight/ http://diveintohtml5.org/everything.html http://www.modernizr.com/ http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills http://sublimevideo.net/ http://videojs.com/ http://www.happyworm.com/jquery/jplayer/
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Mehr von Patrick Lauke
Mehr von Patrick Lauke (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010
- 1. Multimedia and HTML5 Patrick H. Lauke / Think Vitamin HTML5 Online Conference / 1 November 2010 AUDIO, VIDEO AND CANVAS SUPPORT
- 2. Web Evangelist at Opera
- 4. “...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
- 5. making your site Fonzie compliant...
- 6. <video>
- 7. Adobe Flash currently most common video delivery mechanism
- 8. <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>
- 10. <video src="video.webm" controls Autoplay Loop preload="none" poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a> </video>
- 11. video as native object ● “plays nice” with rest of the page ● keyboard accessibility built-in
- 12. video formats the big debate
- 13. MP4 / H.264 ubiquitous, patent encumbered, licensing/royalties
- 14. Ogg Theora “free and open”, no licensing/royalties not many tools for it, not web optimised
- 15. WebM open and royalty-free, web optimised
- 16. 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>
- 18. still include fallback for old browsers http://camendesign.com/code/video_for_everybody
- 19. <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>
- 20. powerful (simple) API to script your own controls
- 22. controlling a <video> element var v = document.getElementById('player'); v.play(); v.pause(); v.volume = … ; v.currentTime = … ; …
- 23. 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) …
- 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)
- 26. <canvas>
- 27. canvas = “scriptable images” <canvas width="…" height="…"></canvas>
- 28. 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);
- 29. 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
- 30. 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, … ]
- 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)
- 35. video, audio and canvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)
- 38. is it all safe to use, right now?
- 39. don't do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
- 41. feature-detection progressive enhancement, graceful degradation http://diveintohtml5.org/everything.html
- 42. feature-detection for audio/video if (!!document.createElement('video').canPlayType;) { … } if (!!document.createElement('audio').canPlayType;) { … }
- 43. 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'))) { … }
- 45. ready-made HTML5 audio/video players (for the lazy)
- 46. sublimevideo.net
- 47. videojs.com
- 50. not a question of HTML5 replacing Flash...
- 51. giving developers a choice!