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 APIs - native multimedia support and beyond - University of Leeds 05.05.2011

5,664 views

Published on

Published in: Technology
  • Be the first to comment

HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05.2011

  1. 1. HTML5 APIsNATIVE MULTIMEDIA SUPPORT AND BEYONDPatrick H. Lauke / University of Leeds / 5 May 2011
  2. 2. “...extending the language to better supportWeb applications [...] This puts HTML indirect competition with othertechnologies[...] , in particular Flash andSilverlight.”Ian Hickson, Editor of HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
  3. 3. making your site Fonzie compliant...
  4. 4. <video>
  5. 5. Adobe Flash currently most common video delivery mechanism
  6. 6. <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>
  7. 7. <video src="video.webm" controls autoplay loop preload="none" poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a></video>
  8. 8. video as native object● “plays nice” with rest of the page● keyboard accessibility built-in
  9. 9. video formats the big debate
  10. 10. MP4 / H.264ubiquitous, patent encumbered, licensing/royalties
  11. 11. Ogg Theora“free and open”, no licensing/royaltiesnot many tools for it, not web optimised
  12. 12. WebMopen and royalty-free, web optimised
  13. 13. www.youtube.com/html5
  14. 14. 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>
  15. 15. still include fallback for old browsers http://camendesign.com/code/video_for_everybody
  16. 16. <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>
  17. 17. powerful (simple) API to script your own controls
  18. 18. icant.co.uk/easy-youtube
  19. 19. www.w3.org/TR/html5/video.html#media-elements
  20. 20. controlling a <video> elementvar v = document.getElementById(player);v.play();v.pause();v.volume = … ;v.currentTime = … ;…
  21. 21. events fired by <video> elementvar 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)…
  22. 22. people.opera.com/patrickl/experiments/webm/basic-controls
  23. 23. people.opera.com/patrickl/experiments/webm/fancy-controls
  24. 24. people.opera.com/patrickl/experiments/webm/fancy-swap
  25. 25. <audio>
  26. 26. 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)
  27. 27. <canvas>
  28. 28. canvas = “scriptable images”<canvas width="…" height="…"></canvas>
  29. 29. canvas has standard API methods for drawingctx = canvas.getContext("2d");ctx.fillRect(x, y, width, height);ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x, y);ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2);
  30. 30. people.opera.com/patrickl/experiments/canvas/particle/3
  31. 31. mariuswatz.com/works/abstract01js
  32. 32. www.benjoffe.com/code/demos/canvascape
  33. 33. 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
  34. 34. www.splintered.co.uk/experiments/archives/paranoid_0.3
  35. 35. 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, … ]
  36. 36. www.splintered.co.uk/experiments/archives/canvas-ambilight
  37. 37. github.com/mezzoblue/PaintbrushJS
  38. 38. 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)
  39. 39. html5doctor.com/video-canvas-magic
  40. 40. media.chikuyonok.ru/ambilight
  41. 41. www.filamentgroup.com/examples/charting
  42. 42. canvas accessibility concerns
  43. 43. video, audio and canvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)
  44. 44. HTML5 (and friends) haslots more APIs for developers (for powerful client-side apps)
  45. 45. isgeolocationpartofhtml5.com
  46. 46. geolocationnavigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, error);function success(position) { /* wheres Wally? */ var lat = position.coords.latitude; var long = position.coords.longitude; ...}
  47. 47. owlsnearyou.com
  48. 48. offline detectionwindow.addEventListener(online, function(){ … }, true);window.addEventListener(offline, function(){ … }, true); …however, currently unreliable!
  49. 49. application cache<html manifest=”blah.manifest”>CACHE MANIFEST# send this with correct text/cache-manifest MIMEimages/sprites.pngscripts/common.jsscripts/jquery.jsstyles/global.cssNETWORK:# never cached (apart from normal caching mechanism)onlineonly.cssFALLBACK:# pattern matching. fallback file will also be cachedimages/ images/not-offline.png
  50. 50. localStorage/sessionStoragelike cookies...document.cookie = key=value; expires=Thu, 15 Feb 201023:59:59 UTC; path=/…/* convoluted string operations go here … */
  51. 51. localStorage/sessionStoragelike cookies...on steroids!localStorage.setItem(key, value);localStorage.getItem(key);localStorage.clear();localStorage.key = value;if (localStorage.key == …) { … }…
  52. 52. WebSQLrelational DB / SQL in browservar db =openDatabase(dbName, version, displayName, expectedSize);db.transaction(function(tx) { tx.executeSql(sqlStatement, [], function (tx, result) { /* do something with the results */ });});not being developed further (IE/Mozilla prefer IndexedDB)– nonetheless available right now in Opera+WebKit!
  53. 53. is it all safe to use, right now?
  54. 54. dont do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
  55. 55. feature-detectionprogressive enhancement, graceful degradation – or use shims http://diveintohtml5.org/everything.html
  56. 56. feature-detection for audio/videoif (!!document.createElement(video).canPlayType;) { … }if (!!document.createElement(audio).canPlayType;) { … }
  57. 57. feature-detection for audio/video codecsvar v = document.createElement(video);if (!!(v.canPlayType)&& ((v.canPlayType(video/webm;codecs="vp8,vorbis") == probably) || (v.canPlayType(video/webm;codecs="vp8, vorbis") == maybe))){ … }
  58. 58. ready-made HTML5 audio/video players (for the lazy)
  59. 59. sublimevideo.net
  60. 60. videojs.com
  61. 61. www.happyworm.com/jquery/jplayer
  62. 62. HTML5 as Flashkiller?
  63. 63. not a question of HTML5 replacing Flash...
  64. 64. giving developers a choice!
  65. 65. www.opera.com/developer patrick.lauke@opera.com

×