Building an HTML5 Video Player      HTML5 Developer Conference 2012                  #html5videoSteve Heffernan, Video.js ...
• History• User Support• Formats• Code• Bugs• Resources
~2000   ~2008   ~2015
Reasons to use HTML5 Video    • It’s the future!    • Runs natively in the browser    • Cleaner code
<video src="video.mp4" controls></video>
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm">   <source src="vide...
http://blog.mefeedia.com/html5-dec-2011
The ‘Format War’
OPEN   CLOSED
CONTAINER FORMAT VIDEO CODEC AUDIO CODEC
MP4               H.264               AAC3+   9+   9+
OGV                  THEORA                  VORBIS3.5+   3+ 10.5+
WEBM                 VP84+   6+ 10.6+   VORBIS
Three Formats9+   3+     3+   9+     4+     6+ 10.6+     3.5+   3+ 10.5+
Two Formats9+   3+   3+   9+     4+   6+ 10.6+
One Format9+   3+   3+   9+
Handbrake.fr
Firefogg.org
Zencoder.com
Content Protection • RTMP Streaming   • Source Obscurity   • Native App                                          Obscurity...
Content Protection              bit.ly/wAkriF
<video src="video.mp4" controls></video>
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm">   <source src="vide...
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm">   <source src="vide...
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm">   <source src="vide...
<video controls>    <source src="video.mp4" type="video/mp4">    <source src="video.webm" type="video/webm">    <source sr...
•Controls            •Autoplay           •Tracks  •Poster              •Loop  •Preload             •Width/Height<video con...
Tag Builder         http://videojs.com/tag-builder/
JavaScript API     • Attributes     • Functions     • Events
JavaScript API                 Live Demo!                 (good luck)
JavaScript API
Browser/General Issues  •Autobuffer => Preload  •Cross-browser Load Progress Tracking  •Missing Poster in Some Safari Vers...
<video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm">   <source src="vide...
Determine Video Support<script> var vidTag = document.createElement("video"),     flashVersion = swfobject.getFlashPlayerVe...
Device Quirks: iOS 3 • Needs MP4 as first source. • iPad Poster Attribute Bug • iPad JS in Head / iPhone JS not in Head
Device Quirks: Android 2.1 / 2.2 • Can’t touch to start • Type attribute breaks video • canPlayType function broken ~25% o...
Android Touch Start Fix<script> if (navigator.userAgent.match(/Android/i) !== null) {   $("video").click(function(){     t...
Android Type Attribute Fix Options• Don’t include type attribute• Don’t use source tags    <video src="video.mp4" controls...
Android canPlayType Fix<script>var androidMatch = navigator.userAgent.match(/Android (d+)./i);if (androidMatch && androidM...
VideoJS.com
Video for Everybody    By Kroc Camen
Dive into HTML5  By Mark Pilgrim
HTML5 Video and Audio in Depth   http://videojs.com/lynda
Building an HTML5 Video Player      HTML5 Developer Conference 2012                  #html5videoSteve Heffernan, Video.js ...
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
HTML5 Video Player - HTML5 Dev Conf 2012
Upcoming SlideShare
Loading in …5
×

HTML5 Video Player - HTML5 Dev Conf 2012

1,579 views

Published on

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

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

No Downloads
Views
Total views
1,579
On SlideShare
0
From Embeds
0
Number of Embeds
85
Actions
Shares
0
Downloads
31
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×