Building an HTML5 Video Player Streaming Media West 2011 #SMWest #html5video Steve Heffernan, VideoJS & Zencoder Thursday, November 10, 2011 Thursday, November 10, 2011 Thursday, November 10, 2011 Thursday, November 10, 2011 ~2000 ~2008 ~2020 Thursday, November 10, 2011 Thursday, November 10, 2011 Reasons to use HTML5 Video Now • It’s the future! • Runs natively in the browser • Cleaner code Thursday, November 10, 2011 <video src="video.webm" controls></video> Thursday, November 10, 2011 <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> Thursday, November 10, 2011 Thursday, November 10, 2011 Thursday, November 10, 2011 http://blog.mefeedia.com/html5-feb-2011 Thursday, November 10, 2011 <video src="video.webm" controls></video> Thursday, November 10, 2011 <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> </video> Thursday, November 10, 2011 <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> </video> Thursday, November 10, 2011 <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> Thursday, November 10, 2011 <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> Thursday, November 10, 2011 Embed Builder Thursday, November 10, 2011 Thursday, November 10, 2011 OPEN CLOSED Thursday, November 10, 2011 Thursday, November 10, 2011 CONTAINER FORMAT VIDEO CODEC AUDIO CODEC Thursday, November 10, 2011 MP4 H.264 AAC 3+ 9+ 9+ Thursday, November 10, 2011 OGV THEORA VORBIS 3.5+ 3+ 10.5+ Thursday, November 10, 2011 WEBM VP8 4+ 6+ 10.6+ VORBIS Thursday, November 10, 2011 Thursday, November 10, 2011 Thursday, November 10, 2011 Three Formats 3+ 9+ 9+ 4+ 6+ 10.6+ 3.5+ 3+ 10.5+ Thursday, November 10, 2011 Two Formats 3+ 9+ 9+ 4+ 6+ 10.6+ Thursday, November 10, 2011 One Format 3+ 9+ 9+ Thursday, November 10, 2011 Handbrake.fr Thursday, November 10, 2011 Firefogg.org Thursday, November 10, 2011 Zencoder.com Thursday, November 10, 2011 Content Protection • RTMP Streaming • Source Obscurity • Native App Obscurity • DRM (Flash • Time/GEO/IP Access/Smooth limited URLs • HTTP Streaming Streaming) • AES Encryption Thursday, November 10, 2011 Browser/General Issues •Autobuffer => Preload •Missing Poster in Some Safari Versions •Cross-browser Load Progress Tracking •HTML5 Browsers Do Not Fallback on Incompatible Sources Thursday, November 10, 2011 Device Quirks: iOS 3 • Needs MP4 as first source. • iPad Poster Attribute Bug • iPad JS in Head / iPhone JS not in Head Thursday, November 10, 2011 Device Quirks: Android 2.1 / 2.2 • @type at MP4 source breaks. • Video can only be programmatically started. Thursday, November 10, 2011 VideoJS.com Thursday, November 10, 2011 VideoJS - 3 Pieces •HTML Embed Code •Javascript Library (video.js) •CSS Skin (video-js.css) Thursday, November 10, 2011 CSS Skin Thursday, November 10, 2011 CSS Skin Thursday, November 10, 2011 CSS Skin Thursday, November 10, 2011 CSS Skin Thursday, November 10, 2011 CSS Skin Thursday, November 10, 2011 Video for Everybody By Kroc Camen Thursday, November 10, 2011 Dive into HTML5 By Mark Pilgrim Thursday, November 10, 2011 HTML5 Video and Audio in Depth http://videojs.com/lynda Thursday, November 10, 2011 Thursday, November 10, 2011 Building an HTML5 Video Player Streaming Media West 2011 #SMWest #html5video Steve Heffernan, VideoJS & Zencoder http://videojs.com @videojs Thursday, November 10, 2011.