HTML5 Multimedia: where we are, where we're going
Upcoming SlideShare
Loading in...5
×
 

HTML5 Multimedia: where we are, where we're going

on

  • 7,471 views

A much-​​​​hyped feature of HTML5 is native multimedia. In this session we’ll look at embedding <audio> and <video> into your pages, and how to make it work cross-​​​​browser ...

A much-​​​​hyped feature of HTML5 is native multimedia. In this session we’ll look at embedding <audio> and <video> into your pages, and how to make it work cross-​​​​browser and degrade gracefully in older browsers. Sound too good to be true? It’s not!

We’ll look at the pros and the cons of HTML5 multimedia and see how to write simple controls with JavaScript. Most excitingly, we’ll also look at how HTML5 builds in support for subtitles and captions for multimedia accessibility. And you might pick up a Turkish dancing tip on the way.

---

Edited version of my Web Directions London talk on 26 May 2011. Slides that don't make sense out of context are removed.

Statistics

Views

Total Views
7,471
Views on SlideShare
6,153
Embed Views
1,318

Actions

Likes
5
Downloads
56
Comments
0

13 Embeds 1,318

http://www.webdirections.org 1104
http://lanyrd.com 193
url_unknown 3
http://us-w1.rockmelt.com 3
http://paper.li 3
http://www.slideshare.net 2
https://twitter.com 2
http://www.vpshub.vic.gov.au 2
http://translate.googleusercontent.com 2
http://tweetedtimes.com 1
http://twitter.com 1
http://www.intranet.vic.gov.au 1
http://thierrydec 1
More...

Accessibility

Categories

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Multimedia: where we are, where we're going HTML5 Multimedia: where we are, where we're going Presentation Transcript

  • HTML5 multimediaWhere we are, where were goingBruce Lawson
  • Anne van Kesteren annevk at opera.comWed Feb 28 05:47:56 PST 2007Hi,Opera has some internal expiremental builds with an implementation of a <video> element. The elementexposes a simple API (for the moment) much like the Audio() object: play() pause() Stop()The idea is that it works like <object> except that it has special <video> semantics much like <img> hasimage semantics. In markup you could prolly use it as follows: <figure> <video src=news-snippet.ogg> ... </video> <legend>HTML5 in BBC News</legend> </figure>I attached a proposal for the element and as you can see there are still some open issues. The element andits API are of course open for debate. Were not enforcing this upon the world ;-)Cheers, http://lists.whatwg.org/pipermail/whatwg-whatwg.org/2007-February/009702.html
  • <object width="425" height="344"> <param name="movie"value="http://www.example.com/v/9sEI1AUFJKw&hl=en&fs=1&"></param> <param name="allowFullScreen"value="true"></param> <param name="allowscriptaccess"value="always"></param> <embedsrc="http://www.example.com/v/9sEI1AUFJKw&hl=en&fs=1&" type="application/x-shockwave-flash"allowscriptaccess="always" allowfullscreen="true"width="425" height="344"></embed></object>
  • <video src=pudding.webm controls autoplay poster=poster.jpg width=320 height=240> <a href=video.webm>Download movie</a></video>
  • <audio src=bieber.ogg controls autoplay> <a href=bieber.ogg>Download horrid pap</a></audio>
  • <video src=pudding.webm loop>
  • <audio src=bieber.ogg preload><audio src=bieber.ogg preload=auto><audio src=bieber.ogg preload=none><audio src=bieber.ogg preload=metadata>
  • video as native object...why is it important?● keyboard accessibility built-in● “play nice” with rest of the page● Simple API for controls
  • "In addition to giving video an HTMLelement, we must also agree on a baselinevideo format that will be universallysupported, just like the GIF, JPEG and PNGimage format are universally supported. Itsimportant that the video format we choosecan be supported by a wide range of devicesand that its royalty-free (RF). RF is a well-established principle for W3C standards." http://people.opera.com/howcome/2007/video/
  • Ogg Theora“free and open”, no licensing/royaltiesnot many tools for it, not web optimised
  • MP4 / H.264ubiquitous, patent encumbered, licensing/royalties, hardware accelerated
  • WebM"open and royalty-free", web optimised, hardware acceleration on its way
  • video formats webM Ogg/ Theora mp4/ h264Opera yes yesChrome yes yes Nope (Chrome.soon)Firefox Yes (FF4) yesSafari yesIE9 Yes (if installed) yes
  • The politics of codecs
  • audio formats mp3 Ogg/ Vobis wavOpera yes yesChrome yes yesFirefox yes yesSafari yes yesIE9 yes yes
  • Giving everybody video<video controls autoplay poster=… width=… height=…> <source src=pudding.mp4 type=video/mp4> <source src=pudding.webm type=video/webm> <!-- fallback content --></video>
  • <video controls poster="…" 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> still include fallback for old browsers http://camendesign.com/code/video_for_everybody
  • Help● archive.org converts and hosts creative-commons licensed media● vid.ly has a free conversion/ hosting service (max 1GB source file) see vid.ly/5u4h3e● Miro video converter is a drag and drop GUI skin on FFMPEG
  • powerful (simple) API
  • www.w3.org/TR/html5/video.html#media-elements
  • controlling <video> with JavaScriptvar v = document.getElementByTagName(video)[0];v.play();v.pause();v.volume = … ;v.currentTime = … ;…
  • events fired by <video>var v = document.getElementById(player);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)…
  • Race condition:html5demos.com/video
  • video media queries<video controls><source src=hi-res.ogv media="(min-device-width:800px)"><source src=lo-res.ogv></video>http://dev.w3.org/html5/spec/video.html#the-source-element
  • Full-screen video● Currently, WebkitEnterFullscreen();● May 11, WebKit announced its implementing Gecko API https://wiki.mozilla.org/Gecko:FullScreenAPI● Opera likes this approach, too
  • <video> accessibility
  • WebM release does not support subtitlesWHATWG / W3C RFC will release guidance on subtitles and otheroverlays in HTML5 <video> in the near future. WebM intends to followthat guidance. http://code.google.com/p/webm/issues/detail?id=11 Egg image Kacper "Kangel" Aniołek http://commons.wikimedia.org/wiki/File:Egg.jpg
  • <track> element<video controls poster=… width=… height=…> <source src=movie.webm type=video/webm> <track src=subtitles-en.vtt kind=subtitles srclang=en> <track src=subtitles-de.vtt kind=subtitles srclang=de> <!-- fallback content --></video>http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-track-element
  • webVTTWEBVTT FILE101:23:45,678 --> 01:23:46,789Hello world!201:23:48,910 --> 01:23:49,101HelloWorld!www.iandevlin.com/blog/2011/05/html5/webvtt-and-video-subtitlesblog.gingertech.net/2011/03/29/webvtt-explained/
  • WebVTT formatting Supports positioning of text Supports <b> and <i> Colouring individual speakers Support vertical text Supports RTL Supports ruby annotationshttp://www.whatwg.org/specs/web-apps/current-work/webvtt.html
  • <track> polyfillhttp://www.delphiki.com/html5/playr/
  • Synchronising media elementsEach media element can have a MediaController. A MediaController is an objectthat coordinates the playback of multiple media elements, for instance so that asign-language interpreter track can be overlaid on a video track, with the twobeing kept in sync....Media elements with a MediaController are said to be slaved to their controller. TheMediaController modifies the playback rate and the playback volume of each of themedia elements slaved to it, and ensures that when any of its slaved mediaelements unexpectedly stall, the others are stopped at the same time.When a media element is slaved to a MediaController, its playback rate is fixed tothat of the other tracks in the same MediaController, and any looping is disabled. http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#synchronising- multiple-media-elements http://www.w3.org/WAI/PF/HTML/wiki/Media_Multitrack_Media_API
  • How mature is all this? Looping latency people.opera.com/patrickl/experiments/audio/hacky-looper/ HTML5 video issues on the iPad and how to solve themblog.millermedeiros.com/2011/03/html5-video-issues-on-the-ipad-and-how-to-solve-them/ Unsolved HTML5 video issues on iOS http://blog.millermedeiros.com/2011/04/unsolved-html5-video-issues-on-ios/ Audio Sprites (and fixes for iOS) remysharp.com/2010/12/23/audio-sprites/
  • “...extending the language to better support Webapplications … This puts HTML in direct competitionwith other technologies intended for applications deployedover the Web, in particular Flash and Silverlight.”Ian Hickson, Editor of HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
  • DRM on HTML5 without changes Henri Sivonenlists.whatwg.org/htdig.cgi/whatwg-whatwg.org/2010- July/027051.html
  • getUserMedia API(previously known as "HTML5 <device>")
  • <video autoplay></video><script>var video = document.querySelector(video);If (navigator.getUserMedia){navigator.getUserMedia(video,successCallback,errorCallback);function successCallback(stream) { video.src = stream; }...</script>
  • my.opera.com/core/blog/2011/03/23/webcam-orientation-preview
  • Thanks Mike Taylor @miketaylr for JS help, and Patrick Lauke@patrick_h_lauke for the Hixie voice. (What does that "H" stand for?) Ian Devlin @iandevlin and Silvia Pfeiffer @silviapfeiffer for webVTT advice Philip Jägenstedt @foolip and Simon Pieters @zcorpan forimplementing/ QA-ing multimedia in Opera and explaining it to me slowly and patiently