audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010

audio, video and canvas in HTML5
NATIVE MULTIMEDIA SUPPORT

Patrick H. Lauke / standards>next / Manchester / 29 September 2010

“...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

making your site Fonzie compliant...

Adobe Flash currently most common
video delivery mechanism

<video src="video.webm"
controls
Autoplay
Loop
preload="none"
poster="poster.jpg"
width="320" height="240">
<a href="video.webm">Download movie</a>
</video>

video as native object
● “plays nice” with rest of the page
●
keyboard accessibility built-in

video formats
the big debate

MP4 / H.264

ubiquitous, patent encumbered, licensing/royalties

Ogg Theora

“free and open”, no licensing/royalties
not many tools for it, not web optimised

WebM

open and royalty-free, web optimised

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" />

</video>

still include fallback for old browsers
http://camendesign.com/code/video_for_everybody

powerful (simple) API
to script your own controls

www.w3.org/TR/html5/video.html#media-elements

controlling a <video> element
var v = document.getElementById('player');

v.play();
v.pause();
v.volume = … ;
v.currentTime = … ;
…

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)
…

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" />

</audio>

same format debacle: MP3 vs Ogg Vorbis (vs WAV)

canvas = “scriptable images”

<canvas width="…" height="…"></canvas>

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);

canvas drawing ready-made images

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

canvas access to image data array
canvasData = ctx.getImageData(x,y,w,h);

[R,G,B,A,R,G,B,A,R,G,B,A,R,G,B,A, … ]

canvas exporting image data as data:uri
…
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!

canvas also works with video
v = document.getElementById('player');

ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2);

grab currently displayed frame (update as appropriate)

video, audio and canvas on any device
without plugins
(Java / Flash / Silverlight not ubiquitous)

HTML5 (and friends) has
lots more APIs for developers
(for powerful client-side apps)

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;
...
}

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)

is it all safe to use, right now?

don't do browser sniffing

http://www.flickr.com/photos/timdorr/2096272747/

feature-detection
progressive enhancement, graceful degradation – or use shims
http://diveintohtml5.org/everything.html

feature-detection for audio/video
if (!!document.createElement('video').canPlayType;) { … }

if (!!document.createElement('audio').canPlayType;) { … }

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')))
{ … }

ready-made HTML5 audio/video players
(for the lazy)

www.happyworm.com/jquery/jplayer

not a question of HTML5 replacing Flash...

www.opera.com/developer
people.opera.com/patrickl/presentations/standards-next_29.09.2010/standards-next_29.09.2010.pdf
patrick.lauke@opera.com

audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (6)

Similar to audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010

Similar to audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010 (20)

More from Patrick Lauke

More from Patrick Lauke (20)

Recently uploaded

Recently uploaded (20)

audio, video and canvas in HTML5 - standards>next Manchester 29.09.2010