HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012
-
Upload
patrick-lauke -
Category
Technology
-
view
2.750 -
download
1
Transcript of HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012
![Page 1: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/1.jpg)
HTML5 multimedia
Patrick H. Lauke / DevUp / Barcelona / 27 April 2012
BROWSER-NATIVE VIDEO AND AUDIO
![Page 2: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/2.jpg)
<video>
![Page 3: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/3.jpg)
Adobe Flash currently most commonvideo/audio delivery mechanism
![Page 4: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/4.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 5: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/5.jpg)
<video src="video.webm"></video>
originally proposed by Opera in 2007dev.opera.com/articles/view/labs-a-call-for-video-on-the-web
![Page 6: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/6.jpg)
<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>
![Page 7: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/7.jpg)
video as native object
![Page 8: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/8.jpg)
![Page 9: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/9.jpg)
people.opera.com/patrickl/experiments/webm/hover+transition
![Page 10: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/10.jpg)
powerful (simple) API
![Page 11: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/11.jpg)
<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)
![Page 13: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/13.jpg)
people.opera.com/patrickl/experiments/webm/basic-controls
![Page 14: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/14.jpg)
HTML5 does not specifyhow browser controls should look
![Page 15: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/15.jpg)
![Page 16: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/16.jpg)
people.opera.com/patrickl/experiments/webm/fancy-controls
![Page 17: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/17.jpg)
people.opera.com/patrickl/experiments/webm/fancy-swap
![Page 18: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/18.jpg)
in-page video on mobile?
![Page 19: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/19.jpg)
![Page 20: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/20.jpg)
video formatsthe big debate?
![Page 21: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/21.jpg)
HTML5 does not specifyvideo container/codec(same as with images in HTML 4.01)
![Page 22: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/22.jpg)
MP4/H.264or
Ogg Theoraor
WebM/VP8
![Page 23: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/23.jpg)
MP4 / H.264
ubiquitous, royalty encumbered, licensing
![Page 24: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/24.jpg)
Ogg Theora
free and open, no licensing feesnot many tools for it, not web optimised
![Page 25: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/25.jpg)
WebM / VP8
open and royalty-free, web-optimisedsupport by hardware and software vendors
![Page 27: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/27.jpg)
Browsers vs codecs
mobile and devices slightly better...
Chome Firefox IE Opera Safari
Ogg Theora ✔ ✔ ✔
WebM / VP8 ✔ ✔ ? ✔
MP4 / H.264 ✔ ✔ ✔
![Page 28: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/28.jpg)
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>
![Page 29: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/29.jpg)
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>
![Page 30: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/30.jpg)
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>
![Page 31: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/31.jpg)
people.opera.com/patrickl/experiments/webm/wrongsource
![Page 32: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/32.jpg)
feature-detection for codecs
v.canPlayType('video/webm;codecs="vp8,vorbis"')
"probably" | "maybe" | "" < WAT?
![Page 33: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/33.jpg)
![Page 34: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/34.jpg)
video and Responsive Web Design<source … media="(min-width:1000px)"><source … media="(max-width:1000px)">
![Page 35: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/35.jpg)
people.opera.com/patrickl/experiments/webm/mediaquery
![Page 36: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/36.jpg)
people.opera.com/patrickl/experiments/webm/mediaquery
![Page 37: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/37.jpg)
flash fallback for older browsershttp://camendesign.com/code/video_for_everybody
![Page 38: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/38.jpg)
<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>
![Page 39: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/39.jpg)
<audio>
![Page 40: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/40.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>
formats: MP3 vs Ogg Vorbis (vs WAV)
![Page 41: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/41.jpg)
<canvas>
![Page 42: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/42.jpg)
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)
![Page 43: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/43.jpg)
html5doctor.com/video-canvas-magichtml5doctor.com/demos/video-canvas-magic/demo2.html
![Page 45: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/45.jpg)
is it all safe to use, right now?
![Page 47: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/47.jpg)
don't do browser sniffing
http://www.flickr.com/photos/timdorr/2096272747/
![Page 48: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/48.jpg)
feature-detectionprogressive enhancement, graceful degradation
diveintohtml5.info/everything.html
![Page 49: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/49.jpg)
feature-detection for audio/video
if (!!document.createElement('video').canPlayType;) { … }
if (!!document.createElement('audio').canPlayType;) { … }
![Page 54: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/54.jpg)
dev.w3.org/2011/webrtc/editor/getusermedia.html
![Page 55: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/55.jpg)
camera access// Operanavigator.getUserMedia({video:true},success,error);[…]video.src = stream;
// WebKitnavigator.webkitGetUserMedia("video",success,error);[…]video.src = window.webkitURL.createObjectURL(stream);
gUM Shield: http://html5doctor.com/getusermedia/
![Page 56: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/56.jpg)
![Page 59: HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012](https://reader035.fdocuments.net/reader035/viewer/2022062405/5555cab2d8b42aaf158b49b3/html5/thumbnails/59.jpg)