1.
HTML5 multimedia
BROWSER-NATIVE VIDEO AND AUDIO
Patrick H. Lauke / DevUp / Barcelona / 27 April 2012

2.
<video>

3.
Adobe Flash currently most common
video/audio delivery mechanism

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

5.
<video src="video.webm"></video>
originally proposed by Opera in 2007
dev.opera.com/articles/view/labs-a-call-for-video-on-the-web

6.
<video src="video.webm"
controls
autoplay
muted
loop
preload="none|metadata|auto"
poster="poster.jpg"
width="320" height="240">
<a href="video.webm">Download movie</a>
</video>

7.
video as native object

8.
people.opera.com/patrickl/experiments/webm/hover+transition

9.
powerful (simple) API

10.
<video> and JavaScript
var v = document.getElementById('player');
v.play()
v.pause()
v.volume = …
v.currentTime = …
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)

11.
www.w3.org/2010/05/video/mediaevents.html

12.
people.opera.com/patrickl/experiments/webm/basic-controls

13.
HTML5 does not specify
how browser controls should look

14.
people.opera.com/patrickl/experiments/webm/fancy-controls

15.
people.opera.com/patrickl/experiments/webm/fancy-swap

16.
in-page video on mobile?

17.
video formats
the big debate?

18.
HTML5 does not specify
video container/codec
(same as with images in HTML 4.01)

19.
MP4/H.264
or
Ogg Theora
or
WebM/VP8

20.
MP4 / H.264
ubiquitous, royalty encumbered, licensing

21.
Ogg Theora
free and open, no licensing fees
not many tools for it, not web optimised

22.
WebM / VP8
open and royalty-free, web-optimised
support by hardware and software vendors

23.
http://tools.google.com/dlpage/webmmf

24.
Browsers vs codecs
Chome Firefox IE Opera Safari
Ogg Theora ✔ ✔ ✔
WebM / VP8 ✔ ✔ ? ✔
MP4 / H.264 ✔ ✔ ✔
mobile and devices slightly better...

25.
providing multiple sources
<video controls width="…" height="…">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<source src="movie.ogv" type="video/ogg">
<!-- fallback content -->
</video>

26.
specifying codecs
<video controls width="…" height="…">
<source … type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'>
<source … type='video/webm; codecs="vorbis,vp8"'>
<source … type='video/ogg; codecs="theora,vorbis"'>
<!-- fallback content -->
</video>

27.
understanding fallback
<video controls width="…" height="…">
<source … type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"'>
<!-- fallback content →
<p>Shown to browsers that don't support video element,
and NOT just browsers that don't support MP4/H.264</p>
</video>

28.
people.opera.com/patrickl/experiments/webm/wrongsource

29.
feature-detection for codecs
v.canPlayType('video/webm;codecs="vp8,vorbis"')
"probably" | "maybe" | "" < WAT?

30.
video and Responsive Web Design
<source … media="(min-width:1000px)">
<source … media="(max-width:1000px)">

31.
people.opera.com/patrickl/experiments/webm/mediaquery

32.
people.opera.com/patrickl/experiments/webm/mediaquery

33.
flash fallback for older browsers
http://camendesign.com/code/video_for_everybody

34.
<video controls width="…" height="…">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
<source src="movie.ogv" type="video/ogg" />
<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>

35.
<audio>

36.
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>
formats: MP3 vs Ogg Vorbis (vs WAV)

37.
<canvas>

38.
canvas also works with video
ctx = canvas.getContext("2d");
v = document.getElementsByTagName('video')[0];
ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2);
grab currently displayed frame (update as appropriate)

39.
html5doctor.com/video-canvas-magic
html5doctor.com/demos/video-canvas-magic/demo2.html

40.
media.chikuyonok.ru/ambilight

41.
is it all safe to use, right now?

42.
www.youtube.com/html5

43.
don't do browser sniffing
http://www.flickr.com/photos/timdorr/2096272747/

44.
feature-detection
progressive enhancement, graceful degradation
diveintohtml5.info/everything.html

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

46.
sublimevideo.net

47.
www.jplayer.org

48.
www.textfiles.com/underconstruction

49.
dev.w3.org/2011/webrtc/editor/webrtc.html

50.
dev.w3.org/2011/webrtc/editor/getusermedia.html

51.
camera access
// Opera
navigator.getUserMedia({video:true},success,error);
[…]
video.src = stream;
// WebKit
navigator.webkitGetUserMedia("video",success,error);
[…]
video.src = window.webkitURL.createObjectURL(stream);
gUM Shield: http://html5doctor.com/getusermedia/

52.
neave.com/webcam/html5

53.
shinydemos.com/qr-code

54.
www.opera.com/developer
patrick.lauke@opera.com