Download as KEY, PPTX
![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>](https://image.slidesharecdn.com/html5devconf-html5video-121015212820-phpapp01/75/HTML5-Video-Player-HTML5-Dev-Conf-2012-48-2048.jpg)
HTML5 Video Player - HTML5 Dev Conf 2012
- 1. Building an HTML5Video Player HTML5 Developer Conference 2012 #html5video Steve Heffernan, Video.js & Zencoder & Brightcove http://videojs.com @heff @videojs
- 2. • History • UserSupport • Formats • Code • Bugs • Resources
- 6. ~2000 ~2008 ~2015
- 8. Reasons to useHTML5 Video • It’s the future! • Runs natively in the browser • Cleaner code
- 9.
- 10. <video controls> <sourcesrc="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>
- 13.
- 14.
- 16. OPEN CLOSED
- 18. CONTAINER FORMAT VIDEOCODEC AUDIO CODEC
- 19. MP4 H.264 AAC 3+ 9+ 9+
- 20. OGV THEORA VORBIS 3.5+ 3+ 10.5+
- 21. WEBM VP8 4+ 6+ 10.6+ VORBIS
- 23. Three Formats 9+ 3+ 3+ 9+ 4+ 6+ 10.6+ 3.5+ 3+ 10.5+
- 24. Two Formats 9+ 3+ 3+ 9+ 4+ 6+ 10.6+
- 25. One Format 9+ 3+ 3+ 9+
- 26.
- 27.
- 28.
- 29. Content Protection •RTMP Streaming • Source Obscurity • Native App Obscurity • DRM (Flash • Time/GEO/IP Access/Smooth limited URLs • HTTP Streaming Streaming) • AES Encryption
- 30. Content Protection bit.ly/wAkriF
- 31.
- 32. <video controls> <sourcesrc="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> </video>
- 33. <video controls> <sourcesrc="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> </video>
- 34. <video controls> <sourcesrc="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. <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. •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. Tag Builder http://videojs.com/tag-builder/
- 38. JavaScript API • Attributes • Functions • Events
- 39. JavaScript API Live Demo! (good luck)
- 40.
- 41. Browser/General Issues •Autobuffer => Preload •Cross-browser Load Progress Tracking •Missing Poster in Some Safari Versions •HTML5 Browsers Do Not Fallback on Incompatible Sources
- 42. <video controls> <sourcesrc="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>
- 43. 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/
- 44. Device Quirks: iOS3 • Needs MP4 as first source. • iPad Poster Attribute Bug • iPad JS in Head / iPhone JS not in Head
- 45. Device Quirks: Android2.1 / 2.2 • Can’t touch to start • Type attribute breaks video • canPlayType function broken ~25% of Android Users
- 46. Android Touch StartFix <script> if (navigator.userAgent.match(/Android/i) !== null) { $("video").click(function(){ this.play(); }); } </script>
- 47. Android Type AttributeFix 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")
- 48. Android canPlayType Fix <script> varandroidMatch = 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>
- 49.
- 50. Video for Everybody By Kroc Camen
- 51. Dive into HTML5 By Mark Pilgrim
- 52. HTML5 Video andAudio in Depth http://videojs.com/lynda
- 53. Building an HTML5Video Player HTML5 Developer Conference 2012 #html5video Steve Heffernan, Video.js & Zencoder & Brightcove http://videojs.com @heff @videojs
Editor's Notes
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n