Video.js - How to build and HTML5 Video Player
- 2. Demo
- 3. Project Background • • Combinator • HTML5 Video Encoding INPUT FROM • Kroc Camen (Video for Everybody) • Mark Pilgrim (Dive Into HTML5) • Bruce Lawson (Opera & HTML5 Doctor)
- 4. VideoJS - 3 Pieces •HTML Embed Code (Video for Everybody) •Javascript Library (video.js) •CSS Skin (video-js.css)
- 5. Embed Code Video for Everybody By Kroc Camen
- 6. Embed Code <video width="640" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> <p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"Ogg"</a> </p>
- 7. Embed Code <video width="640" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> <p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"Ogg"</a> </p>
- 8. Embed Code <video width="640" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> <p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"Ogg"</a> </p>
- 9. Embed Code <video width="640" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> <p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"Ogg"</a> </p>
- 10. Embed Code <video width="640" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> <p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"Ogg"</a> </p>
- 11. Embed Code <video width="640" height="360" controls> <source src="__VIDEO__.MP4" type="video/mp4" /> <source src="__VIDEO__.OGV" type="video/ogg" /> <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF"> <param name="movie" value="__FLASH__.SWF" /> <param name="flashvars" value="controlbar=over&image=__POSTER__.JPG&file=__VIDEO__.MP4" /> <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__" title="No video playback capabilities, please download the video below" /> </object> </video> <p> <strong>Download Video:</strong> Closed Format: <a href="__VIDEO__.MP4">"MP4"</a> Open Format: <a href="__VIDEO__.OGV">"Ogg"</a> </p>
- 12. Embed Code
- 13. JavaScript Library •Custom Controls •Added Features •Browser & Device Fixes
- 14. Custom Controls
- 15. JavaScript Library ADDED FEATURES •Volume Control •Full-window Mode •Subtitles
- 16. JavaScript Library BROWSER & DEVICE FIXES •iPad Poster Attribute Bug •iPad JS in Head / iPhone JS not in Head •Android Type Attribute Bug •Autobuffer => Preload •Missing Poster in Some Safari Versions •Cross-browser Load Progress Tracking •Firefox No-fallback on Incompatible Source
- 17. CSS Skin
- 18. CSS Skin
- 19. CSS Skin
- 20. CSS Skin
- 21. CSS Skin <ul class="vjs-controls"> <li class="vjs-play-control vjs-play"><span></span></li> <li class="vjs-progress-control"> <ul class="vjs-progress-holder"> <li class="vjs-load-progress"></li><li class="vjs-play-progress"></li> </ul> </li> <li class="vjs-time-control"> <span class="vjs-current-time-display">00:00</span> <span> / </span><span class="vjs-duration-display">00:00</span> </li> <li class="vjs-volume-control"> <ul><li></li><li></li><li></li><li></li><li></li><li></li></ul> </li> <li class="vjs-fullscreen-control"> <ul><li></li><li></li><li></li><li></li></ul> </li> </ul>
- 22. CSS Skin
- 23. CSS Skin
- 24. Resources Video for Everybody http://camendesign.com Dive into HTML5 http://diveintohtml5.com VideoJS Blog http://videojs.com/blog
- 26. Future •Flash Player Integration Modules •HTTP Streaming •HTML-Specific Effects & Interactions