Audio and Video in HTML5 - London Web Standards 20.09.2010
Upcoming SlideShare
Loading in...5
×
 

Audio and Video in HTML5 - London Web Standards 20.09.2010

on

  • 2,984 views

 

Statistics

Views

Total Views
2,984
Views on SlideShare
2,905
Embed Views
79

Actions

Likes
2
Downloads
50
Comments
0

6 Embeds 79

http://blog.kinorama.com 33
http://ontwik.com 22
http://my.opera.com 11
http://lanyrd.com 10
http://static.slidesharecdn.com 2
http://www.twylah.com 1

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

Audio and Video in HTML5 - London Web Standards 20.09.2010 Audio and Video in HTML5 - London Web Standards 20.09.2010 Presentation Transcript

  • Audio and Video in HTML5 NATIVE MULTIMEDIA SUPPORT Patrick H. Lauke / London Web Standards / London / 20 September 2010
  • HTML5 <!DOCTYPE html>
  • “...extending the language to better support Web applications [...] This puts HTML in direct competition with other technologies[...] , in particular Flash and Silverlight.” Ian Hickson, Editor of HTML5 http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
  • <video>
  • Adobe Flash currently most common video 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> <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>
  • <video src="video.webm" controls autoplay poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a> </video>
  • video as native object ● “plays nice” with rest of the page ● keyboard accessibility built-in Demonstration of basic video, keyboard access, hover/transitions
  • video formats the big debate
  • MP4 / H.264 ubiquitous, patent encumbered, licensing/royalties
  • Ogg Theora “free and open”, no licensing/royalties not many tools for it, not web optimised
  • www.webmproject.org
  • WebM open and royalty-free, web optimised
  • www.youtube.com/html5
  • providing multiple sources <video controls autoplay poster="…" width="…" height="…"> <source src="movie.webm" type="video/webm" /> <source src="movie.ogv" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <!-- fallback content --> </video>
  • still include fallback for old browsers http://camendesign.com/code/video_for_everybody
  • <video controls autoplay poster="…" width="…" height="…"> <source src="movie.webm" type="video/webm" /> <source src="movie.ogv" type="video/ogg" /> <source src="movie.mp4" type="video/mp4" /> <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>
  • powerful (simple) API to script your own controls
  • icant.co.uk/easy-youtube
  • www.w3.org/TR/html5/video.html#media-elements
  • controlling a <video> element var v = document.getElementById('player'); v.play(); v.pause(); v.volume = … ; v.currentTime = … ; …
  • events fired by <video> element 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) … Demonstration of basic and advanced video controls, swapping sources
  • people.opera.com/philipj/2010/07/21/html5-video-webinar/demos/track.html
  • <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> same format debacle: MP3 vs Ogg Vorbis (vs WAV) Demonstration of basic audio, scripted audio, note about controls
  • video and audio on any device without plugins (Java / Flash / Silverlight not ubiquitous)
  • is it all safe to use, right now?
  • don't do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
  • feature-detection for audio/video if (!!document.createElement('video').canPlayType;) { … } if (!!document.createElement('audio').canPlayType;) { … }
  • feature-detection for audio/video codecs var v = document.createElement('video'); if (!!(v.canPlayType)&& ((v.canPlayType('video/webm;codecs="vp8,vorbis"') == 'probably') || (v.canPlayType('video/webm;codecs="vp8, vorbis"') == 'maybe'))) { … }
  • feature-detection progressive enhancement, graceful degradation – or use shims http://diveintohtml5.org/everything.html
  • ready-made HTML5 audio/video players (for the lazy)
  • sublimevideo.net
  • videojs.com
  • HTML5 as Flashkiller?
  • not a question of HTML5 replacing Flash...
  • giving developers a choice!
  • www.opera.com/developer people.opera.com/patrickl/presentations/lws_20.09.2010/lws_20.09.2010.pdf patrick.lauke@opera.com