HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012

HTML5 multimediaBROWSER-NATIVE VIDEO AND AUDIOPatrick H. Lauke / JSDay / Verona / 17 Maggio 2012

<video>

Adobe Flash currently most common video/audio delivery mechanism

plug-in is a black box

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

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

video as native object

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

powerful (simple) API

<video> and JavaScriptvar 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)

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

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

HTML5 does not specifyhow browser controls should look

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

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

video formatsthe big debate?

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

MP4/H.264 orOgg Theora orWebM/VP8

MP4 / H.264ubiquitous, licensing/royalties

Ogg Theora free and open, no licensing feesnot many tools for it, not web optimised

WebM / VP8 open and royalty-free, web-optimisedsupport by hardware and software vendors

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

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

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

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

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

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

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

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

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

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

<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" /> </audio>formats: MP3 vs Ogg Vorbis (vs WAV)

people.opera.com/patrickl/experiments/audio/windchime

no need for <audio> or <video> in your DOM var s = document.createElement(audio); s.src = aaargh.oga; s.play();

audio “sound sprites” to counter latency and overhead people.opera.com/~emoller/audio-demo

canvas drawing ready-made imagesctx = canvas.getContext("2d");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 arrayctx = canvas.getContext("2d");canvasData = ctx.getImageData(x,y,w,h);[R,G,B,A,R,G,B,A,R,G,B,A,R,G,B,A, … ]

canvas also works with videoctx = canvas.getContext("2d");v = document.getElementById(player);ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2);grab currently displayed frame (update as appropriate)

html5doctor.com/video-canvas-magic

media.chikuyonok.ru/ambilight

is it all safe to use, right now?

www.youtube.com/html5

dont do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/

feature-detectionprogressive enhancement, graceful degradation diveintohtml5.info/everything.html

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

sublimevideo.net

www.jplayer.org

www.textfiles.com/underconstruction

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

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

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/

www.opera.com/browser/next

neave.com/webcam/html5

shinydemos.com/qr-code

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

HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012

by Patrick Lauke

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 16

Statistics

HTML5 multimedia - browser-native video and audio - JSDay / Verona / 17 May 2012 Presentation Transcript