Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML5 Audio & Video

50 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

HTML5 Audio & Video

  1. 1. Audio&Videoin HTML5Aaron GustafsonEasy Designs, LLCslideshare.net/AaronGustafson
  2. 2. Audio & Video 2
  3. 3. Audio & Video“I want to see the end of the plug-in” —HTML5
  4. 4. Audio & VideoWe’re almost there
  5. 5. Audio & Video Older browsersstill need a fallback
  6. 6. Audio & Video Older browsersstill need a fallback (Usually Flash)
  7. 7. Audio & VideoMusic to our ears
  8. 8. Audio & VideoCan you hear me now?The audio element<audio src="my.oga" controls="controls"></audio>
  9. 9. Audio & VideoCan you hear me now? Browser .aac .mp3 .oga .wavChrome 6+ YES YES YES NOFirefox 3.6+ NO NO YES YESInternet Explorer 9+ YES YES NO YESOpera 10.5+ NO NO YES YESSafari 5+ YES YES NO YES
  10. 10. Audio & VideoCan you hear me now?<audio controls="controls"> <source src="my.mp3"/> <source src="my.oga"/> <!-- fallback --></audio>
  11. 11. Audio & VideoAvailable attributessrcURL for the audio file.autoplayA boolean specifying whether or not the file should play as soon as it can.loopA boolean specifying whether or not playback of the file should be repeated.controlsA boolean that tells the browser to use its default media controls.preloadTells the browser what to content to preload. Options: “none,” “metadata,” and “auto.”autobuffer (deprecated)A boolean defining whether the file should be buffered in advance. Replaced by preload.
  12. 12. Audio & VideoCan you hear me now?<audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <!-- fallback --></audio>
  13. 13. Audio & VideoFallback options<audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <ul> <li><a href="my.mp3">Download as audio/mp3</a></li> <li><a href="my.oga">Download as audio/ogg</a></li> </ul></audio>
  14. 14. Audio & VideoFallback options<audio controls="controls" autobuffer="autobuffer" preload="auto"> <source src="my.mp3"/> <source src="my.oga"/> <object …> <!-- flash player goes here --> </object></audio>
  15. 15. Audio & VideoFallback options$(audio).each(function(){ var $audio = $(this), media = {}, formats = []; $audio.find(source).each(function(){ var src = $(this).attr(src), ext = src.split(.).pop(); media[ext] = src; formats.push(ext); }); $audio.jPlayer({ swfPath: /vendors/jPlayer, ready: function(){ $audio.jPlayer(setMedia, media); }, supplied: formats.join(, ) }); }); Using jQuery & jPlayer
  16. 16. Audio & VideoRoll your own$(audio).each(function(){ var audio = this, $button = $(<button>Play</button>) .click(function(){ audio.play(); }); $(this) .removeAttr(controls) .after($button); }); Using jQuery
  17. 17. Audio & VideoOpiate of the masses
  18. 18. Audio & VideoElementary, my dear WatsonThe video element<video src="my.ogv" controls="controls"></video>
  19. 19. Audio & VideoNot so elementaryVideo file = container file (like ZIP)๏ 1 video track๏ 1 (or more) audio tracks๏ metadata๏ subtitle/caption tracks (optional)
  20. 20. Audio & VideoNot so elementaryVideo formatsFlash Video (.flv)Prior to 2008, the only video format supported in Adobe Flash.MPEG 4 (.m4v or .mp4)Based on QuickTime; iTunes uses this format.Ogg (.ogv)Open source container format.WebM (.webm)New format announced in May 2010.
  21. 21. Audio & VideoNot so elementaryVideo codecsH.264Used primarily in MPEG 4. Only video codec natively supported on iOS. Patented.TheoraUsed primarily in Ogg. Royalty free. Supported in Firefox 3.5+ (in Ogg).VP8Used primarily in WebM. Owned by Google, but licensed royalty-free.
  22. 22. Audio & VideoNot so elementaryAudio codecsMP3Nearly universal in usage, but was part of FLV. Patented.AAC (Advanced Audio Coding)Used primarily in MP4. Patented.VorbisUsed in Ogg audio & video as well as WebM. Royalty-free.
  23. 23. Audio & VideoNot so elementary Browser .m4v .ogv .webm (AAC + H.264) (Vorbis + Theora) (Vorbis + VP8)Chrome 3+ 3+ 6+ (for now)Firefox NO 3.5+ 4+Internet Explorer 9+ NO MAYBEOpera NO 10.5+ 10.6+Safari 3.1+ MAYBE MAYBE
  24. 24. Audio & VideoFormat juggling<video controls="controls" width="640" height="480"> <source src="my.m4v"/> <source src="my.webm"/> <source src="my.ogv"/> <!-- fallback --></video>
  25. 25. Audio & VideoA good first impression<video controls="controls" width="640" height="480" poster="my.png"> <source src="my.m4v"/> <source src="my.webm"/> <source src="my.ogv"/> <!-- fallback --></video>
  26. 26. Audio & VideoKindness to strangers <video controls="controls" width="640" height="480" poster="my.png"> <source src="my.m4v" type=video/mp4; codecs="avc1.42E01E, mp4a.40.2"/> <source src="my.webm" type=video/webm; codecs="vp8, vorbis"/> <source src="my.ogv" type=video/ogg; codecs="theora, vorbis"/> <!-- fallback --> </video>Note: The MPEG 4 codec will depend on the encoding “profiles” you use.
  27. 27. Audio & VideoAvailable attributessrcURL for the audio file.autoplayA boolean specifying whether or not the file should play as soon as it can.loopA boolean specifying whether or not playback of the file should be repeated.controlsA boolean that tells the browser to use its default media controls.posterThe image to be shown while the video is not activated.preloadTells the browser what to content to preload. Options: “none,” “metadata,” and “auto.”autobuffer (deprecated)A boolean defining whether the file should be buffered in advance. Replaced by preload.
  28. 28. Audio & VideoNo MIME, no serviceAddType video/ogg .ogvAddType video/mp4 .mp4AddType video/webm .webm
  29. 29. Audio & VideoFallback options<video width="600" height="400" poster="/r/2-5.png" controls="controls" preload="none"> <source src="/r/2-5.m4v" type="video/mp4"/> <source src="/r/2-5.webm" type="video/webm"/> <source src="/r/2-5.ogv" type="video/ogg"/> <img src="/r/2-5.png" width="600" height="400" alt=""/> <ul> <li><a href="/r/2-5.m4v">Download as video/mp4</a></li> <li><a href="/r/2-5.webm">Download as video/webm</a></li> <li><a href="/r/2-5.ogv">Download as video/ogg</a></li> </ul></video>
  30. 30. Audio & VideoFallback options<video width="600" height="400" poster="/r/2-5.png" controls="controls" preload="none"> <source src="/r/2-5.m4v" type="video/mp4"/> <source src="/r/2-5.webm" type="video/webm"/> <source src="/r/2-5.ogv" type="video/ogg"/> <object width="600" height="400" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.1.swf"/> <param name="allowfullscreen" value="true"/> <param name="flashvars" value=config={"clip": {"url": "/r/2-5.m4v", "autoPlay":false, "autoBuffering":true}}/> <img src="/r/2-5.png" width="600" height="400" alt=""/> <ul><!-- links --></ul> </object></video>
  31. 31. Audio & VideoHow the sausage is made
  32. 32. Audio & VideoTools of the trade RoadMovie Firefogg
  33. 33. Audio & VideoWorking with RoadMovie
  34. 34. Audio & VideoWorking with RoadMovie
  35. 35. Audio & VideoWorking with RoadMovie
  36. 36. Audio & VideoWorking with RoadMovieSubtitle formatsSubRip (.srt)SubViewer (.sub)SubStation Alpha (.ssa/.ass)MicroDVD
  37. 37. Audio & VideoWorking with RoadMovieSubtitle formatsSubRip (.srt) 1 00:01:31,041 --> 00:01:32,000 Hello? 2 00:02:10,164 --> 00:02:12,082 Good morning, is your mother in?
  38. 38. Audio & VideoWorking with RoadMovieSubtitle formatsSubViewer (.sub) 00:01:31.04,00:01:32.00 Hello? 00:02:10.16,00:02:12.08 Good morning, is your mother in?
  39. 39. Audio & VideoWorking with RoadMovie
  40. 40. Audio & VideoWorking with Firefogg
  41. 41. Audio & VideoWorking with Firefogg
  42. 42. Audio & VideoWorking with Firefogg
  43. 43. Audio & VideoWorking with Firefogg
  44. 44. Audio & VideoWorking with Firefogg
  45. 45. Audio & VideoWorking with Firefogg
  46. 46. Audio & VideoService please
  47. 47. Audio & VideoThe Future: Media Fragments// temporalhttp://www.example.com/video.ogv#t=10,20// Live streaminghttp://www.example.com/video.ogv#t=clock:2009-07-26T11:19:01Z,2009-07-26T11:20:01Z// Rectangular regionhttp://www.example.com/video.ogv#xywh=160,120,320,240// Track selectionhttp://www.example.com/video.ogv#track=”video” http://www.w3.org/2008/WebVideo/Fragments/WD-media-fragments-spec/
  48. 48. Audio & VideoThe Future: Media Annotationsvar title = song.getMediaProperty(["title"]);if ( noErrorStatus(title[0].status) == true ){ // title = [ { "Title" : { // "propertyName" : "title", // "titleLabel" : "Artificial Horizon" , // "typeLink" : "http://www.ebu.ch/metadata/cs/ebu_ObjectTypeCodeCS.xml#21", // "typeLabel" : "Album title", // "statusCode" : 200 // } } ]} http://dev.w3.org/2008/video/mediaann/mediaont-api-1.0/mediaont-api-1.0.html
  49. 49. Audio & VideoThe Future: Timed Text<video src="elephant.ogv" poster="elephant.png"> <itext id="video_ar" lang="ar" type="text/srt" charset="Windows-1256" display="auto" src="elephant.ar.srt" category="SUB"></itext> <itext id="video_zh" lang="zh" type="text/srt" charset="GB18030" display="auto" src="elephant.zh.srt" category="SUB"></itext> <itext id="video_es" lang="es" type="text/srt" charset="ISO-8859" display="auto" src="elephant.es.srt" category="SUB"></itext> <itext id="audiodesc" lang="en" type="text/srt" charset="ISO-8859" display="yes" src="audiodescription.srt" category="TAD"></itext></video>
  50. 50. Audio & VideoThe Future: Timed Text<video src="elephant.ogv" poster="elephant.png"> <track srclang="ar" src="elephant.ar.srt" label=”!"#$%&‫ ”ا‬kind="subtitles"/> <track srclang="zh" src="elephant.zh.srt" label=”汉语” kind="subtitles"/> <track srclang="es" src="elephant.es.srt" label=”Español” kind="subtitles"/> <track src="audiodescription.srt" kind="descriptions" label=”Audio Descriptions”/></video>
  51. 51. Audio & VideoThe Future: Timed Text http://www.annodex.net/~silvia/itext/elephant_no_skin_v2.html
  52. 52. Audio & Video Slides available at http://slideshare.net/AaronGustafson This presentation is licensed under Creative CommonsAttribution-Noncommercial-Share Alike 3.0 flickr Photo Credits “Revolutionary Technology…” by Jimee, Jackie, Tom & Asha “08-jan-28” by sashafatcat “Revere EIGHT - 8mm…” by Kevitivity “Sausage Making Machinery” by erix!

×