audio and video in html5 - london web standards 20.09.2010
TRANSCRIPT
Audio and Video in HTML5
Patrick H. Lauke / London Web Standards / London / 20 September 2010
NATIVE MULTIMEDIA SUPPORT
HTML5<!DOCTYPE html>
“...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
<video>
Adobe Flash currently most commonvideo delivery mechanism
<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>
<video src="video.webm" controls autoplay 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
Demonstration of basic video, keyboard access, hover/transitions
video formatsthe big debate
MP4 / H.264
ubiquitous, patent encumbered, licensing/royalties
Ogg Theora
“free and open”, no licensing/royaltiesnot 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" /><!-- fallback content -->
</video>
still include fallback for old browsershttp://camendesign.com/code/video_for_everybody
<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>
powerful (simple) APIto script your own controls
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)…Demonstration of basic and advanced video controls, swapping sources
people.opera.com/philipj/2010/07/21/html5-video-webinar/demos/track.html
<audio>
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)
Demonstration of basic audio, scripted audio, note about controls
video and audio on any devicewithout plugins
(Java / Flash / Silverlight not ubiquitous)
is it all safe to use, right now?
don't do browser sniffing
http://www.flickr.com/photos/timdorr/2096272747/
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'))) { … }
feature-detectionprogressive enhancement, graceful degradation – or use shims
http://diveintohtml5.org/everything.html
ready-made HTML5 audio/video players(for the lazy)
HTML5 as Flashkiller?
not a question of HTML5 replacing Flash...
giving developers a choice!
www.opera.com/developerpeople.opera.com/patrickl/presentations/lws_20.09.2010/lws_20.09.2010.pdf