From the 'HTML5 player showcase/How to Build an HTML5 player' given at the Open Video Conference in October 2010.

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&amp;image=__POSTER__.JPG&amp;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&amp;image=__POSTER__.JPG&amp;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&amp;image=__POSTER__.JPG&amp;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&amp;image=__POSTER__.JPG&amp;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&amp;image=__POSTER__.JPG&amp;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&amp;image=__POSTER__.JPG&amp;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

25. http://videojs.com

26. Future
•Flash Player Integration
Modules
•HTTP Streaming
•HTML-Specific Effects &
Interactions