HTML5 APIsNATIVE MULTIMEDIA SUPPORT AND BEYONDPatrick H. Lauke / University of Leeds / 5 May 2011
“...extending the language to better supportWeb applications [...] This puts HTML indirect competition with othertechnolog...
making your site Fonzie compliant...
<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>  <...
<video src="video.webm"  controls  autoplay  loop  preload="none"  poster="poster.jpg"  width="320" height="240">    <a hr...
video as native object●  “plays nice” with rest of the page●  keyboard accessibility built-in
video formats   the big debate
MP4 / H.264ubiquitous, patent encumbered, licensing/royalties
Ogg Theora“free and open”, no licensing/royaltiesnot many tools for it, not web optimised
WebMopen and royalty-free, web optimised
www.youtube.com/html5
providing multiple sources<video controls autoplay poster="…" width="…" height="…">   <source src="movie.webm" type="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="m...
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> elementvar v = document.getElementById(player);v.play();v.pause();v.volume = … ;v.currentTime = … ;…
events fired by <video> elementvar v = document.getElementById(player);v.addEventListener(loadeddata, function() { … }, tr...
people.opera.com/patrickl/experiments/webm/basic-controls
people.opera.com/patrickl/experiments/webm/fancy-controls
people.opera.com/patrickl/experiments/webm/fancy-swap
<audio>
audio exactly the same as video<audio src=”music.mp3” controls autoplay></audio>[...]<audio controls autoplay>   <source s...
<canvas>
canvas = “scriptable images”<canvas width="…" height="…"></canvas>
canvas has standard API methods for drawingctx = canvas.getContext("2d");ctx.fillRect(x, y, width, height);ctx.beginPath()...
people.opera.com/patrickl/experiments/canvas/particle/3
mariuswatz.com/works/abstract01js
www.benjoffe.com/code/demos/canvascape
canvas drawing ready-made imagesctx = canvas.getContext("2d");var logo = new Image();logo.src = logo.png;ctx.drawImage(log...
www.splintered.co.uk/experiments/archives/paranoid_0.3
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...
www.splintered.co.uk/experiments/archives/canvas-ambilight
github.com/mezzoblue/PaintbrushJS
canvas also works with videoctx = canvas.getContext("2d");v = document.getElementById(player);ctx.drawImage(v,x1,y1,w1,h2,...
html5doctor.com/video-canvas-magic
media.chikuyonok.ru/ambilight
www.filamentgroup.com/examples/charting
canvas accessibility concerns
video, audio and canvas on any device           without plugins         (Java / Flash / Silverlight not ubiquitous)
HTML5 (and friends) haslots more APIs for developers       (for powerful client-side apps)
isgeolocationpartofhtml5.com
geolocationnavigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, er...
owlsnearyou.com
offline detectionwindow.addEventListener(online, function(){ … }, true);window.addEventListener(offline, function(){ … }, ...
application cache<html manifest=”blah.manifest”>CACHE MANIFEST# send this with correct text/cache-manifest MIMEimages/spri...
localStorage/sessionStoragelike cookies...document.cookie = key=value; expires=Thu, 15 Feb 201023:59:59 UTC; path=/…/* con...
localStorage/sessionStoragelike cookies...on steroids!localStorage.setItem(key, value);localStorage.getItem(key);localStor...
WebSQLrelational DB / SQL in browservar db =openDatabase(dbName, version, displayName, expectedSize);db.transaction(functi...
is it all safe to use, right now?
dont do browser sniffing      http://www.flickr.com/photos/timdorr/2096272747/
feature-detectionprogressive enhancement, graceful degradation – or use shims                    http://diveintohtml5.org/...
feature-detection for audio/videoif (!!document.createElement(video).canPlayType;) { … }if (!!document.createElement(audio...
feature-detection for audio/video codecsvar v = document.createElement(video);if (!!(v.canPlayType)&&     ((v.canPlayType(...
ready-made HTML5 audio/video players            (for the lazy)
sublimevideo.net
videojs.com
www.happyworm.com/jquery/jplayer
HTML5 as Flashkiller?
not a question of HTML5 replacing Flash...
giving developers a choice!
www.opera.com/developer   patrick.lauke@opera.com
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05.2011
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05.2011
HTML5 APIs - native multimedia support and beyond - University of Leeds 05.05.2011
Upcoming SlideShare
Loading in...5
×

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

4,830

Published on

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,830
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
263
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×