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
Thursday, November 10, 2011
Thursday, November 10, 2011 Thursday, November 10, 2011 Thursday, November 10, 2011 http://blog.mefeedia.com/html5-feb-2011
Thursday, November 10, 2011
Thursday, November 10, 2011
Thursday, November 10, 2011
Thursday, November 10, 2011
Thursday, November 10, 2011
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