Building an HTML5 Video PlayerSteve Heffernan, Video.js & Zencoder & Brightcovehttp://videojs.com@heff @videojs
AgendaHistoryUser SupportFormatsCodeBugsFutureResources2 | Confidential   © 2013 Brightcove Inc.
3 | Confidential   © 2013 Brightcove Inc.
4 | Confidential   © 2013 Brightcove Inc.
5 | Confidential   © 2013 Brightcove Inc.
~2000    ~2008   ~20156 | Confidential                   © 2013 Brightcove Inc.
7 | Confidential   © 2013 Brightcove Inc.
Reasons to use HTML5 VideoIt’s the future! Runs natively in the browser Cleaner code8 | Confidential                © 2013...
<video src=“video.mp4” controls></video>9 | Confidential                      © 2013 Brightcove Inc.
<video controls>      <source src=“video.mp4” type=“video/mp4”>      <source src=“video.webm” type=“video/webm”>      <sou...
11 | Confidential   © 2013 Brightcove Inc.
12 | Confidential   © 2013 Brightcove Inc.
http://blog.mefeedia.com/html5-dec-201113 | Confidential                                             © 2013 Brightcove Inc.
The ‘Format War’14 | Confidential   © 2013 Brightcove Inc.
15 | Confidential   © 2013 Brightcove Inc.
OPEN   CLOSED16 | Confidential                   © 2013 Brightcove Inc.
17 | Confidential   © 2013 Brightcove Inc.
18 | Confidential   © 2013 Brightcove Inc.
CONTAINER FORMAT                       VIDEO CODEC                       AUDIO CODEC19 | Confidential                     ...
MP4                              H.264                              AAC  3+                9+   9+20 | Confidential       ...
OGV                               THEORA                               VORBIS3.5+                3+ 10.5+21 | Confidential...
WEBM                            VP8                           VORBIS 4+             6+ 10.6+22 | Confidential             ...
23 | Confidential   © 2013 Brightcove Inc.
Three Formats   9+               3+   3+   9+                    4+   6+ 10.6+               3.5+      3+ 10.5+24 | Confid...
Two Formats   9+               3+   3+   9+                    4+   6+ 10.6+25 | Confidential                   © 2013 Bri...
One Format   9+               3+   3+   9+26 | Confidential                  © 2013 Brightcove Inc.
Handbrake.fr27 | Confidential   © 2013 Brightcove Inc.
Firefogg.org28 | Confidential   © 2013 Brightcove Inc.
Zencoder.com29 | Confidential   © 2013 Brightcove Inc.
Content Protection    RTMP Streaming   Source Obscurity      Native App Obscurity    DRM (Flash       Time/GEO/IP limited ...
Content Protection  bit.ly/wAkriF31 | Confidential    © 2013 Brightcove Inc.
<video src=“video.mp4” controls></video>32 | Confidential                      © 2013 Brightcove Inc.
<video controls>      <source src=“video.mp4” type=“video/mp4”>      <source src=“video.webm” type=“video/webm”>      <sou...
<video controls>      <source src=“video.mp4” type=“video/mp4”>      <source src=“video.webm” type=“video/webm”>      <sou...
<video controls>      <source src=“video.mp4” type=“video/mp4”>      <source src=“video.webm” type=“video/webm”>      <sou...
<video controls>      <source src=“video.mp4” type=“video/mp4”>      <source src=“video.webm” type=“video/webm”>      <sou...
Controls           Autoplay             Tracks  Poster             Loop  Preload            Width/Height<video controls au...
Tag Builderhttp://videojs.com/tag-builder/ 38 | Confidential                © 2013 Brightcove Inc.
JavaScript API     Attributes     Functions•    Events    39 | Confidential   © 2013 Brightcove Inc.
Browser/General Issues•    Autobuffer => Preload•    Cross-browser Load Progress Tracking•    Missing Poster in Some Safar...
<video controls>      <source src=“video.mp4” type=“video/mp4”>      <source src=“video.webm” type=“video/webm”>      <sou...
Determine Video Support<script>  var vidTag = document.createElement(“video”),        flashVersion = swfobject.getFlashPla...
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•    ...
Android Touch Start Fix<script> if (navigator.userAgent.match(/Android/i) !== null) {    $(“video”).click(function(){     ...
Android Type Attribute Fix Options•    Don’t include type attribute Don’t use source tags     <video src=“video.mp4” contr...
Android canPlayType Fix<script>Var androidMatch = navigator.userAgent.match(/Android (d+./i);if (androidMatch && androidMa...
The Future of HTML5 Video•     Content Protection - Encrypted Media Extensions•     Adaptive Streaming - Media Source Exte...
VideoJS.com49 | Confidential   © 2013 Brightcove Inc.
Video for Everybody by Krox Camen50 | Confidential                   © 2013 Brightcove Inc.
Dive into HTML 5 by Mark Pilgrim51 | Confidential                  © 2013 Brightcove Inc.
HTML5 Video and Audio in Depth                http://videojs.com/lynda52 | Confidential                          © 2013 Br...
Building an HTML5 Video Player                          Brightcove Webcast, March 2013                    Steve Heffernan,...
Thank you
Upcoming SlideShare
Loading in …5
×

Building an HTML5 Video Player

584
-1

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
584
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building an HTML5 Video Player

  1. 1. Building an HTML5 Video PlayerSteve Heffernan, Video.js & Zencoder & Brightcovehttp://videojs.com@heff @videojs
  2. 2. AgendaHistoryUser SupportFormatsCodeBugsFutureResources2 | Confidential © 2013 Brightcove Inc.
  3. 3. 3 | Confidential © 2013 Brightcove Inc.
  4. 4. 4 | Confidential © 2013 Brightcove Inc.
  5. 5. 5 | Confidential © 2013 Brightcove Inc.
  6. 6. ~2000 ~2008 ~20156 | Confidential © 2013 Brightcove Inc.
  7. 7. 7 | Confidential © 2013 Brightcove Inc.
  8. 8. Reasons to use HTML5 VideoIt’s the future! Runs natively in the browser Cleaner code8 | Confidential © 2013 Brightcove Inc.
  9. 9. <video src=“video.mp4” controls></video>9 | Confidential © 2013 Brightcove Inc.
  10. 10. <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> 10 | Confidential © 2013 Brightcove Inc.
  11. 11. 11 | Confidential © 2013 Brightcove Inc.
  12. 12. 12 | Confidential © 2013 Brightcove Inc.
  13. 13. http://blog.mefeedia.com/html5-dec-201113 | Confidential © 2013 Brightcove Inc.
  14. 14. The ‘Format War’14 | Confidential © 2013 Brightcove Inc.
  15. 15. 15 | Confidential © 2013 Brightcove Inc.
  16. 16. OPEN CLOSED16 | Confidential © 2013 Brightcove Inc.
  17. 17. 17 | Confidential © 2013 Brightcove Inc.
  18. 18. 18 | Confidential © 2013 Brightcove Inc.
  19. 19. CONTAINER FORMAT VIDEO CODEC AUDIO CODEC19 | Confidential © 2013 Brightcove Inc.
  20. 20. MP4 H.264 AAC 3+ 9+ 9+20 | Confidential © 2013 Brightcove Inc.
  21. 21. OGV THEORA VORBIS3.5+ 3+ 10.5+21 | Confidential © 2013 Brightcove Inc.
  22. 22. WEBM VP8 VORBIS 4+ 6+ 10.6+22 | Confidential © 2013 Brightcove Inc.
  23. 23. 23 | Confidential © 2013 Brightcove Inc.
  24. 24. Three Formats 9+ 3+ 3+ 9+ 4+ 6+ 10.6+ 3.5+ 3+ 10.5+24 | Confidential © 2013 Brightcove Inc.
  25. 25. Two Formats 9+ 3+ 3+ 9+ 4+ 6+ 10.6+25 | Confidential © 2013 Brightcove Inc.
  26. 26. One Format 9+ 3+ 3+ 9+26 | Confidential © 2013 Brightcove Inc.
  27. 27. Handbrake.fr27 | Confidential © 2013 Brightcove Inc.
  28. 28. Firefogg.org28 | Confidential © 2013 Brightcove Inc.
  29. 29. Zencoder.com29 | Confidential © 2013 Brightcove Inc.
  30. 30. Content Protection RTMP Streaming Source Obscurity Native App Obscurity DRM (Flash Time/GEO/IP limited HTTP Streaming Access/Smooth URLs AES Encryption Streaming)30 | Confidential © 2013 Brightcove Inc.
  31. 31. Content Protection bit.ly/wAkriF31 | Confidential © 2013 Brightcove Inc.
  32. 32. <video src=“video.mp4” controls></video>32 | Confidential © 2013 Brightcove Inc.
  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”></video> 33 | Confidential © 2013 Brightcove Inc.
  34. 34. <video controls> <source src=“video.mp4” type=“video/mp4”> <source src=“video.webm” type=“video/webm”> <source src=“video.ogv” type=“video/ogg”></video> 34 | Confidential © 2013 Brightcove Inc.
  35. 35. <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> 35 | Confidential © 2013 Brightcove Inc.
  36. 36. <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> 36 | Confidential © 2013 Brightcove Inc.
  37. 37. 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> 37 | Confidential © 2013 Brightcove Inc.
  38. 38. Tag Builderhttp://videojs.com/tag-builder/ 38 | Confidential © 2013 Brightcove Inc.
  39. 39. JavaScript API Attributes Functions• Events 39 | Confidential © 2013 Brightcove Inc.
  40. 40. Browser/General Issues• Autobuffer => Preload• Cross-browser Load Progress Tracking• Missing Poster in Some Safari Devices• HTML5 Browsers Do Not Fallback on Incompatible Sources 40 | Confidential © 2013 Brightcove Inc.
  41. 41. <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> 41 | Confidential © 2013 Brightcove Inc.
  42. 42. 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/ 42 | Confidential © 2013 Brightcove Inc.
  43. 43. Device Quirks: iOS 3• Needs MP4 as first source. iPad Poster Attribute Bug• iPad JS in Head / iPhone JS not in Head 43 | Confidential © 2013 Brightcove Inc.
  44. 44. Device Quirks: Android 2.1 / 2.2• Can’t touch to start Type attribute breaks video• canPlayType function broken• ~25% of Android Users 44 | Confidential © 2013 Brightcove Inc.
  45. 45. Android Touch Start Fix<script> if (navigator.userAgent.match(/Android/i) !== null) { $(“video”).click(function(){ this.play(); }); }</script> 45 | Confidential © 2013 Brightcove Inc.
  46. 46. 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”) 46 | Confidential © 2013 Brightcove Inc.
  47. 47. 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> 47 | Confidential © 2013 Brightcove Inc.
  48. 48. The Future of HTML5 Video• Content Protection - Encrypted Media Extensions• Adaptive Streaming - Media Source Extensions• Timed Text/Events - WebVTT• Video Chat - WebRTC• New Formats/Codecs - VPnext, h.265, Opus, TransOgg 48 | Confidential © 2013 Brightcove Inc.
  49. 49. VideoJS.com49 | Confidential © 2013 Brightcove Inc.
  50. 50. Video for Everybody by Krox Camen50 | Confidential © 2013 Brightcove Inc.
  51. 51. Dive into HTML 5 by Mark Pilgrim51 | Confidential © 2013 Brightcove Inc.
  52. 52. HTML5 Video and Audio in Depth http://videojs.com/lynda52 | Confidential © 2013 Brightcove Inc.
  53. 53. Building an HTML5 Video Player Brightcove Webcast, March 2013 Steve Heffernan, Video.js & Zencoder & Brightcove http://videojs.com @heff @videojs53 | Confidential © 2013 Brightcove Inc.
  54. 54. Thank you
  1. A particular slide catching your eye?

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

×