HTML5 multimediaBROWSER-NATIVE VIDEO, AUDIO AND CANVASPatrick H. Lauke / meet.js Summit / Poznań / 14 January 2011
Web Evangelist at Opera
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"></video>
<video src="video.webm"  controls  autoplay  muted  loop  preload="none|metadata|auto"  poster="poster.jpg"  width="320" h...
video as native object●  behaves like any other HTML element●  keyboard accessibility out-of-the-box
people.opera.com/patrickl/experiments/webm/hover+transition
powerful (simple) API
controlling <video> with JavaScriptvar v = document.getElementById(player);v.play();v.pause();v.volume = … ;v.currentTime ...
events fired by <video>var v = document.getElementById(player);v.addEventListener(loadeddata, function() { … }, true)v.add...
www.w3.org/2010/05/video/mediaevents.html
people.opera.com/patrickl/experiments/webm/basic-controls
people.opera.com/patrickl/experiments/webm/fancy-controls
people.opera.com/patrickl/experiments/webm/fancy-swap
HTML5 means all yourold dHTML is cool again!
video formats the big debate?
HTML5 does not specify video container/codec   (same as with images in HTML 4.01)
MP4/H.264    orOgg Theora    orWebM/VP8
MP4 / H.264ubiquitous, patent encumbered, licensing/royalties
Ogg Theora    free and open, no licensing feesnot many tools for it, not web optimised
WebM / VP8  open and royalty-free, web-optimisedsupport by hardware and software vendors
providing multiple sources<video controls width="…" height="…">  <source src="movie.mp4" type="video/mp4">  <source src="m...
specifying codecs<video controls width="…" height="…">   <source … type=video/mp4; codecs="avc1.42E01E,mp4a.40.2">   <sour...
feature-detection for codecsv.canPlayType(video/webm;codecs="vp8,vorbis")           "probably" | "maybe" | ""
www.ffmpeg.org
www.mirovideoconverter.com
flash fallback for older browsers http://camendesign.com/code/video_for_everybody
<video controls width="…" height="…">   <source src="movie.mp4" type="video/mp4" />   <source src="movie.webm" type="video...
<audio>
audio...exactly the same as video<audio src=”music.mp3” controls autoplay … ></audio><audio controls autoplay>   <source s...
people.opera.com/patrickl/experiments/audio/wilhelm
people.opera.com/patrickl/experiments/audio/windchime
no need for <audio> in your documentvar s = document.createElement(audio);     s.src = aaargh.oga; s.play();       (same f...
<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
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.4
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
desandro.com/resources/close-pixelate
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
is it all safe to use, right now?
www.youtube.com/html5
dont do browser sniffing      http://www.flickr.com/photos/timdorr/2096272747/
feature-detectionprogressive enhancement, graceful degradation              diveintohtml5.info/everything.html
feature-detection for audio/videoif (!!document.createElement(video).canPlayType;) { … }if (!!document.createElement(audio...
sublimevideo.net
www.jplayer.org
www.textfiles.com/underconstruction
dev.w3.org/2011/webrtc/editor/webrtc.html
dev.w3.org/2011/webrtc/editor/getusermedia.html
camera accessnavigator.getUserMedia({video:true},success,error);
dev.opera.com/labs
people.opera.com/danield/html5/explode
neave.com/webcam/html5
HTML5 as Flashkiller?
not a question ofHTML5 replacing Flash...
giving developers a choice!
www.opera.com/developer   patrick.lauke@opera.com
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / Poznan / 14 January 2012
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / Poznan / 14 January 2012
HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / Poznan / 14 January 2012
Upcoming SlideShare
Loading in …5
×

HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / Poznan / 14 January 2012

3,490 views

Published on

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,490
On SlideShare
0
From Embeds
0
Number of Embeds
177
Actions
Shares
0
Downloads
65
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

HTML5 multimedia - browser-native video, audio and canvas - meet.js Summit / Poznan / 14 January 2012

  1. 1. HTML5 multimediaBROWSER-NATIVE VIDEO, AUDIO AND CANVASPatrick H. Lauke / meet.js Summit / Poznań / 14 January 2011
  2. 2. Web Evangelist at Opera
  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"></video>
  8. 8. <video src="video.webm" controls autoplay muted loop preload="none|metadata|auto" poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a></video>
  9. 9. video as native object● behaves like any other HTML element● keyboard accessibility out-of-the-box
  10. 10. people.opera.com/patrickl/experiments/webm/hover+transition
  11. 11. powerful (simple) API
  12. 12. controlling <video> with JavaScriptvar v = document.getElementById(player);v.play();v.pause();v.volume = … ;v.currentTime = … ;…
  13. 13. 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)…
  14. 14. www.w3.org/2010/05/video/mediaevents.html
  15. 15. people.opera.com/patrickl/experiments/webm/basic-controls
  16. 16. people.opera.com/patrickl/experiments/webm/fancy-controls
  17. 17. people.opera.com/patrickl/experiments/webm/fancy-swap
  18. 18. HTML5 means all yourold dHTML is cool again!
  19. 19. video formats the big debate?
  20. 20. HTML5 does not specify video container/codec (same as with images in HTML 4.01)
  21. 21. MP4/H.264 orOgg Theora orWebM/VP8
  22. 22. MP4 / H.264ubiquitous, patent encumbered, licensing/royalties
  23. 23. Ogg Theora free and open, no licensing feesnot many tools for it, not web optimised
  24. 24. WebM / VP8 open and royalty-free, web-optimisedsupport by hardware and software vendors
  25. 25. providing multiple sources<video controls width="…" height="…"> <source src="movie.mp4" type="video/mp4"> <source src="movie.webm" type="video/webm"> <source src="movie.ogv" type="video/ogg"> <!-- fallback content --></video>
  26. 26. specifying codecs<video controls width="…" height="…"> <source … type=video/mp4; codecs="avc1.42E01E,mp4a.40.2"> <source … type=video/webm; codecs="vorbis,vp8"> <source … type=video/ogg; codecs="theora,vorbis"> <!-- fallback content --></video>
  27. 27. feature-detection for codecsv.canPlayType(video/webm;codecs="vp8,vorbis") "probably" | "maybe" | ""
  28. 28. www.ffmpeg.org
  29. 29. www.mirovideoconverter.com
  30. 30. flash fallback for older browsers http://camendesign.com/code/video_for_everybody
  31. 31. <video controls 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>
  32. 32. <audio>
  33. 33. 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>formats: MP3 vs Ogg Vorbis (vs WAV)
  34. 34. people.opera.com/patrickl/experiments/audio/wilhelm
  35. 35. people.opera.com/patrickl/experiments/audio/windchime
  36. 36. no need for <audio> in your documentvar s = document.createElement(audio); s.src = aaargh.oga; s.play(); (same for video as well, if youre crazy...)
  37. 37. <canvas>
  38. 38. canvas = “scriptable images”<canvas width="…" height="…"></canvas>
  39. 39. 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);…www.w3.org/TR/2dcontext
  40. 40. people.opera.com/patrickl/experiments/canvas/particle/3
  41. 41. mariuswatz.com/works/abstract01js
  42. 42. 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
  43. 43. www.splintered.co.uk/experiments/archives/paranoid_0.4
  44. 44. 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, … ]
  45. 45. www.splintered.co.uk/experiments/archives/canvas-ambilight
  46. 46. desandro.com/resources/close-pixelate
  47. 47. 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)
  48. 48. html5doctor.com/video-canvas-magic
  49. 49. media.chikuyonok.ru/ambilight
  50. 50. is it all safe to use, right now?
  51. 51. www.youtube.com/html5
  52. 52. dont do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
  53. 53. feature-detectionprogressive enhancement, graceful degradation diveintohtml5.info/everything.html
  54. 54. feature-detection for audio/videoif (!!document.createElement(video).canPlayType;) { … }if (!!document.createElement(audio).canPlayType;) { … }
  55. 55. sublimevideo.net
  56. 56. www.jplayer.org
  57. 57. www.textfiles.com/underconstruction
  58. 58. dev.w3.org/2011/webrtc/editor/webrtc.html
  59. 59. dev.w3.org/2011/webrtc/editor/getusermedia.html
  60. 60. camera accessnavigator.getUserMedia({video:true},success,error);
  61. 61. dev.opera.com/labs
  62. 62. people.opera.com/danield/html5/explode
  63. 63. neave.com/webcam/html5
  64. 64. HTML5 as Flashkiller?
  65. 65. not a question ofHTML5 replacing Flash...
  66. 66. giving developers a choice!
  67. 67. www.opera.com/developer patrick.lauke@opera.com

×