![Page 1: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/1.jpg)
Multimedia and HTML5
Patrick H. Lauke / Think Vitamin HTML5 Online Conference / 1 November 2010
AUDIO, VIDEO AND CANVAS SUPPORT
![Page 2: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/2.jpg)
Web Evangelist at Opera
![Page 3: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/3.jpg)
HTML5<!DOCTYPE html>
![Page 4: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/4.jpg)
“...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 HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
![Page 5: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/5.jpg)
making your site Fonzie compliant...
![Page 6: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/6.jpg)
<video>
![Page 7: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/7.jpg)
Adobe Flash currently most commonvideo delivery mechanism
![Page 8: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/8.jpg)
<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&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
![Page 10: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/10.jpg)
<video src="video.webm" controls Autoplay Loop preload="none" poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a></video>
![Page 11: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/11.jpg)
video as native object● “plays nice” with rest of the page● keyboard accessibility built-in
![Page 12: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/12.jpg)
video formatsthe big debate
![Page 13: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/13.jpg)
MP4 / H.264
ubiquitous, patent encumbered, licensing/royalties
![Page 14: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/14.jpg)
Ogg Theora
“free and open”, no licensing/royaltiesnot many tools for it, not web optimised
![Page 15: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/15.jpg)
WebM
open and royalty-free, web optimised
![Page 16: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/16.jpg)
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>
![Page 18: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/18.jpg)
still include fallback for old browsershttp://camendesign.com/code/video_for_everybody
![Page 19: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/19.jpg)
<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>
![Page 20: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/20.jpg)
powerful (simple) APIto script your own controls
![Page 22: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/22.jpg)
controlling a <video> element
var v = document.getElementById('player');
v.play();v.pause();v.volume = … ;v.currentTime = … ;…
![Page 23: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/23.jpg)
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)…
![Page 24: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/24.jpg)
<audio>
![Page 25: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/25.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)
![Page 26: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/26.jpg)
<canvas>
![Page 27: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/27.jpg)
canvas = “scriptable images”
<canvas width="…" height="…"></canvas>
![Page 28: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/28.jpg)
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);
![Page 29: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/29.jpg)
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
![Page 30: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/30.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, … ]
![Page 31: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/31.jpg)
![Page 32: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/32.jpg)
![Page 33: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/33.jpg)
canvas accessibility concerns
![Page 34: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/34.jpg)
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)
![Page 35: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/35.jpg)
video, audio and canvas on any devicewithout plugins
(Java / Flash / Silverlight not ubiquitous)
![Page 36: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/36.jpg)
![Page 37: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/37.jpg)
![Page 38: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/38.jpg)
is it all safe to use, right now?
![Page 39: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/39.jpg)
don't do browser sniffing
http://www.flickr.com/photos/timdorr/2096272747/
![Page 40: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/40.jpg)
![Page 41: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/41.jpg)
feature-detectionprogressive enhancement, graceful degradation
http://diveintohtml5.org/everything.html
![Page 42: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/42.jpg)
feature-detection for audio/video
if (!!document.createElement('video').canPlayType;) { … }if (!!document.createElement('audio').canPlayType;) { … }
![Page 43: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/43.jpg)
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'))) { … }
![Page 44: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/44.jpg)
patching older browsersgithub.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
![Page 45: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/45.jpg)
ready-made HTML5 audio/video players(for the lazy)
![Page 49: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/49.jpg)
HTML5 as Flashkiller?
![Page 50: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/50.jpg)
not a question of HTML5 replacing Flash...
![Page 51: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/51.jpg)
giving developers a choice!
![Page 52: Multimedia and HTML5 - Think Vitamin HTML5 Online Conference 01.11.2010](https://reader034.vdocuments.site/reader034/viewer/2022052619/5551513db4c905c6268b55cc/html5/thumbnails/52.jpg)
www.opera.com/developerpeople.opera.com/patrickl/presentations/thinkvitamin-html5_01.11.2010/thinkvitamin-html5_01.11.2010.pdf