![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/85/HTML5-Video-Player-HTML5-Dev-Conf-2012-48-320.jpg)
HTML5 Video Player - HTML5 Dev Conf 2012
- 1. Building an HTML5 Video Player HTML5 Developer Conference 2012 #html5video Steve Heffernan, Video.js & Zencoder & Brightcove http://videojs.com @heff @videojs
- 2. • History • User Support • Formats • Code • Bugs • Resources
- 6. ~2000 ~2008 ~2015
- 8. Reasons to use HTML5 Video • It’s the future! • Runs natively in the browser • Cleaner code
- 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>
- 14. The ‘Format War’
- 16. OPEN CLOSED
- 18. CONTAINER FORMAT VIDEO CODEC 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. Handbrake.fr
- 27. Firefogg.org
- 28. Zencoder.com
- 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
- 32. <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. <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. <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. <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. JavaScript API
- 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> <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>
- 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: iOS 3 • Needs MP4 as first source. • iPad Poster Attribute Bug • iPad JS in Head / iPhone JS not in Head
- 45. Device Quirks: Android 2.1 / 2.2 • Can’t touch to start • Type attribute breaks video • canPlayType function broken ~25% of Android Users
- 46. Android Touch Start Fix <script> if (navigator.userAgent.match(/Android/i) !== null) { $("video").click(function(){ this.play(); }); } </script>
- 47. 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")
- 48. 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>
- 49. VideoJS.com
- 50. Video for Everybody By Kroc Camen
- 51. Dive into HTML5 By Mark Pilgrim
- 52. HTML5 Video and Audio in Depth http://videojs.com/lynda
- 53. Building an HTML5 Video 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