Building an HTML5 Video Player - Streaming MediaStreaming Media West 2011 #SMWest #html5video Steve...
49
Streaming Media West 2011 #SMWest #html5video Steve Heffernan, VideoJS & Zencoder Building an HTML5 Video Player Thursday, November 10, 2011
Transcript of Building an HTML5 Video Player - Streaming MediaStreaming Media West 2011 #SMWest #html5video Steve...
Streaming Media West 2011
#SMWest #html5video
Steve Heffernan, VideoJS & Zencoder
Building an HTML5 Video Player
Thursday, November 10, 2011
Thursday, November 10, 2011
Thursday, November 10, 2011
Thursday, November 10, 2011
~2008~2000 ~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
AAC9+ 9+3+
Thursday, November 10, 2011
OGV
THEORA
VORBIS
3+ 10.5+3.5+
Thursday, November 10, 2011
WEBM
VP8
VORBIS6+ 10.6+4+
Thursday, November 10, 2011
Thursday, November 10, 2011
Thursday, November 10, 2011
6+ 10.6+4+
Three Formats
3+ 10.5+3.5+
9+ 9+3+
Thursday, November 10, 2011
6+ 10.6+4+
Two Formats
9+ 9+3+
Thursday, November 10, 2011
One Format
9+ 9+3+
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
• DRM (Flash Access/Smooth Streaming)
• Source Obscurity
• Time/GEO/IP limited URLs
• Native App Obscurity
• HTTP 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
By Kroc Camen
Video for Everybody
Thursday, November 10, 2011
By Mark Pilgrim
Dive into HTML5
Thursday, November 10, 2011
HTML5 Video and Audio in Depth
http://videojs.com/lynda
Thursday, November 10, 2011
Thursday, November 10, 2011
http://videojs.com
@videojs
Building an HTML5 Video Player
Streaming Media West 2011
#SMWest #html5video
Steve Heffernan, VideoJS & Zencoder
Thursday, November 10, 2011
![ALPHASHOT 360 - ORBITVU · Software ⊲ ORBITVU STATION Software Lizenz ⊲ ORBITVU VIEWER (HTML5 Player Lizenz) Technische Spezifikationen [order code 232H2] ALPHASHOT 360 Spezifikationen](https://static.fdocuments.net/doc/165x107/5f06615d7e708231d417b4dc/alphashot-360-orbitvu-software-a-orbitvu-station-software-lizenz-a-orbitvu.jpg)
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ...interoperability.blob.core.windows.net/web/MS-HTML5/[MS-HTML5].pdf · Microsoft Edge / Internet Explorer HTML5 Standards Support](https://static.fdocuments.net/doc/165x107/5a903bb67f8b9a4a268e1ade/ms-html5-microsoft-edge-internet-explorer-html5-ms-html5pdfmicrosoft.jpg)
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ......2.1.55 [HTML5] Section 4.9.5 The tbody element ..... 55 2.1.56 [HTML5] Section 4.9.8 The tr element..... 55 2.1.57 [HTML5]](https://static.fdocuments.net/doc/165x107/5fb29d840f1bb936bf5a22fb/ms-html5-microsoft-edge-internet-explorer-html5-2155-html5-section.jpg)
