1. Upgrade to Video
WEB 2.0 EXPO
2011-03-31 San Francisco, CA
#html5video #w2e
Steve Heffernan, VideoJS & Zencoder
videojs.com

3. Video for Everybody
By Kroc Camen

4. Dive into HTML5
By Mark Pilgrim

9. http://blog.mefeedia.com/html5-feb-2011

10. ~2000 ~2008 ~2015

11. <video src="video.webm" controls></
video>

12. <video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>

13. <video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>

14. <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>

15. <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>

16. Embed Builder

18. CONTAINER FORMAT
VIDEO CODEC
AUDIO CODEC

19. MP4
H.264
AAC

20. OGV
THEORA
VORBIS

21. WEBM
VP8
VORBIS

23. Three Formats
3+ 9+ 9+
4+ 6+ 10.6+
3.5+ 3+ 10.5+

24. Two Formats
3+ 9+ 9+
4+ 6+ 10.6+

25. One Format
3+ 9+ 9+

26. Handbrake.fr

27. Firefogg.org

28. MiroVideoConverter.com

29. FFmpeg.org

30. Zencoder.com

31. Browser & Device Issues
•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
•HTML5 Browsers Do Not Fallback on
Incompatible Sources

33. Demo

34. VideoJS - 3 Pieces
•HTML Embed Code
(Video for Everybody)
•Javascript Library (video.js)
•CSS Skin (video-js.css)

35. JavaScript Library
•Custom Controls
•Added Features
•Browser & Device Fixes

36. Custom Controls

37. JavaScript Library
ADDED FEATURES
•Volume Control
•Full-window Mode
•Subtitles

38. CSS Skin

39. CSS Skin

40. CSS Skin

41. CSS Skin

42. CSS Skin

43. Resources
Video for Everybody
camendesign.com
Dive into HTML5
diveintohtml5.com
VideoJS Blog
videojs.com/blog
VideoJS Support
help.videojs.com

44. Upgrade to Video
videojs.com
@videojs