The document discusses HTML5 multimedia capabilities for playing audio and video natively in browsers without plugins like Flash. It covers the <video> and <audio> tags, supported formats like MP4, WebM, Ogg Theora, and browser support. It also discusses the media playback API and features like controls, sources for different formats, and responsive design.

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

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

10. powerful (simple) API

11. <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)

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

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

14. HTML5 does not specify
how browser controls should look

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

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

18. in-page video on mobile?

20. video formats
the big debate?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

39. <audio>

40. 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)

41. <canvas>

42. 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)

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

44. media.chikuyonok.ru/ambilight

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

46. www.youtube.com/html5

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

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

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

50. sublimevideo.net

51. www.jplayer.org

52. www.textfiles.com/underconstruction

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

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

55. 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/

57. neave.com/webcam/html5

58. shinydemos.com/qr-code

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