More Related Content
![[convergese] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/2012-adaptive-images-convergese-120509135732-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
![[cssdevconf] Adaptive Images in Responsive Web Design](https://cdn.slidesharecdn.com/ss_thumbnails/adaptive-imagesv16-131021133151-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Video.js - How to build and HTML5 Video Player
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
Video.js - How to build and HTML5 Video Player
- 2.
- 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 - 3Pieces •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.
- 13. JavaScript Library •Custom Controls •Added Features •Browser & Device Fixes
- 14.
- 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.
- 18.
- 19.
- 20.
- 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.
- 23.
- 24. Resources Video for Everybody http://camendesign.com Dive into HTML5 http://diveintohtml5.com VideoJS Blog http://videojs.com/blog
- 25.
- 26. Future •Flash Player Integration Modules •HTTP Streaming •HTML-Specific Effects & Interactions