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 Video Player - HTML5 Dev Conf 2012

1,736 views

Published on

Slides from my presentation on building your own HTML5 video player at the HTML5 Developer Conference 2012.

Published in: Technology
  • Be the first to comment

HTML5 Video Player - HTML5 Dev Conf 2012

  1. 1. Building an HTML5 Video Player HTML5 Developer Conference 2012 #html5videoSteve Heffernan, Video.js & Zencoder & Brightcove http://videojs.com @heff @videojs
  2. 2. • History• User Support• Formats• Code• Bugs• Resources
  3. 3. ~2000 ~2008 ~2015
  4. 4. Reasons to use HTML5 Video • It’s the future! • Runs natively in the browser • Cleaner code
  5. 5. <video src="video.mp4" controls></video>
  6. 6. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> <object type="application/x-shockwave-flash" data="flash.swf"> <param name="movie" value="flash.swf" /> <param name="flashvars" value="file=video.mp4" /> </object></video>
  7. 7. http://blog.mefeedia.com/html5-dec-2011
  8. 8. The ‘Format War’
  9. 9. OPEN CLOSED
  10. 10. CONTAINER FORMAT VIDEO CODEC AUDIO CODEC
  11. 11. MP4 H.264 AAC3+ 9+ 9+
  12. 12. OGV THEORA VORBIS3.5+ 3+ 10.5+
  13. 13. WEBM VP84+ 6+ 10.6+ VORBIS
  14. 14. Three Formats9+ 3+ 3+ 9+ 4+ 6+ 10.6+ 3.5+ 3+ 10.5+
  15. 15. Two Formats9+ 3+ 3+ 9+ 4+ 6+ 10.6+
  16. 16. One Format9+ 3+ 3+ 9+
  17. 17. Handbrake.fr
  18. 18. Firefogg.org
  19. 19. Zencoder.com
  20. 20. Content Protection • RTMP Streaming • Source Obscurity • Native App Obscurity • DRM (Flash • Time/GEO/IP Access/Smooth limited URLs • HTTP Streaming Streaming) • AES Encryption
  21. 21. Content Protection bit.ly/wAkriF
  22. 22. <video src="video.mp4" controls></video>
  23. 23. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"></video>
  24. 24. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"></video>
  25. 25. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> <object type="application/x-shockwave-flash" data="flash.swf"> <param name="movie" value="flash.swf" /> <param name="flashvars" value="file=video.mp4" /> </object></video>
  26. 26. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> <object type="application/x-shockwave-flash"data="flash.swf"> <param name="movie" value="flash.swf" /> <param name="flashvars" value="file=video.mp4" /> <img src="image.jpg" alt="title" title="Can’t play video" /> </object></video><p> <strong>Download Video:</strong> <a href="video.mp4">MP4</a> <a href="video.ogv">Ogg</a></p>
  27. 27. •Controls •Autoplay •Tracks •Poster •Loop •Preload •Width/Height<video controls autoplay loop width="480" height="270" poster="poster.png" preload="auto" > <source src="video.mp4" type="video/mp4"> <track kind="captions" src="captions.vtt" srclang="en"></video>
  28. 28. Tag Builder http://videojs.com/tag-builder/
  29. 29. JavaScript API • Attributes • Functions • Events
  30. 30. JavaScript API Live Demo! (good luck)
  31. 31. JavaScript API
  32. 32. Browser/General Issues •Autobuffer => Preload •Cross-browser Load Progress Tracking •Missing Poster in Some Safari Versions •HTML5 Browsers Do Not Fallback on Incompatible Sources
  33. 33. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> <object type="application/x-shockwave-flash" data="flash.swf"> <param name="movie" value="flash.swf" /> <param name="flashvars" value="file=video.mp4" /> </object></video>
  34. 34. Determine Video Support<script> var vidTag = document.createElement("video"), flashVersion = swfobject.getFlashPlayerVersion(); if (vidTag.canPlayType && vidTag.canPlayType("video/mp4")) { // Video Tag } else if (flashVersion.major > 9) { // Flash Object } else { // No Video Support }</script> SWF Object: http://code.google.com/p/swfobject/
  35. 35. Device Quirks: iOS 3 • Needs MP4 as first source. • iPad Poster Attribute Bug • iPad JS in Head / iPhone JS not in Head
  36. 36. Device Quirks: Android 2.1 / 2.2 • Can’t touch to start • Type attribute breaks video • canPlayType function broken ~25% of Android Users
  37. 37. Android Touch Start Fix<script> if (navigator.userAgent.match(/Android/i) !== null) { $("video").click(function(){ this.play(); }); }</script>
  38. 38. Android Type Attribute Fix Options• Don’t include type attribute• Don’t use source tags <video src="video.mp4" controls></video>• Set source through JS API video.src("video.mp4")
  39. 39. Android canPlayType Fix<script>var androidMatch = navigator.userAgent.match(/Android (d+)./i);if (androidMatch && androidMatch[1] < 3) { // Overwrite canPlayType document.createElement("video") .constructor.prototype.canPlayType = function(type){ if (type && type.toLowerCase().indexOf("video/mp4") !== -1) { return "maybe"; } else { return ""; } };}</script>
  40. 40. VideoJS.com
  41. 41. Video for Everybody By Kroc Camen
  42. 42. Dive into HTML5 By Mark Pilgrim
  43. 43. HTML5 Video and Audio in Depth http://videojs.com/lynda
  44. 44. Building an HTML5 Video Player HTML5 Developer Conference 2012 #html5videoSteve Heffernan, Video.js & Zencoder & Brightcove http://videojs.com @heff @videojs

×