• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012
 

HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012

on

  • 3,066 views

 

Statistics

Views

Total Views
3,066
Views on SlideShare
2,404
Embed Views
662

Actions

Likes
3
Downloads
24
Comments
1

11 Embeds 662

http://www.techgig.com 394
http://www.scoop.it 191
http://lanyrd.com 50
http://abangbeca2657.blogspot.com 8
http://www.abangbeca2657.blogspot.com 6
http://feeds.feedburner.com 5
http://www.blogger.com 3
http://us-w1.rockmelt.com 2
https://si0.twimg.com 1
http://tweetedtimes.com 1
https://twitter.com 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Hi Patrick, very interesting, I couldn't go, i don't understand slide 47 :), do you nkow any implementation of VAST standard in HTML5?
    Thanks a lot
    Xavi
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012 HTML5 multimedia - browser-native video and audio - DevUp HTML5 / Barcelona / 27.04.2012 Presentation Transcript

    • HTML5 multimediaBROWSER-NATIVE VIDEO AND AUDIOPatrick H. Lauke / DevUp / Barcelona / 27 April 2012
    • <video>
    • Adobe Flash currently most common video/audio 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> <embedsrc="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"></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
    • in-page video on mobile?
    • 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, royalty encumbered, licensing
    • 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"> <!-- fallback content --></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"> <!-- fallback content --></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
    • people.opera.com/patrickl/experiments/webm/mediaquery
    • flash fallback for older browsers http://camendesign.com/code/video_for_everybody
    • <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>
    • <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>formats: MP3 vs Ogg Vorbis (vs WAV)
    • <canvas>
    • canvas also works with videoctx = 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)
    • html5doctor.com/video-canvas-magic html5doctor.com/demos/video-canvas-magic/demo2.html
    • 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/
    • neave.com/webcam/html5
    • shinydemos.com/qr-code
    • www.opera.com/developer patrick.lauke@opera.com