A background on HTML5 video and how it can be used in WordPress today. Talk given in April 2011 at WordCamp Developers, Vancouver, BC.

1. HTML5 Video for WordPress
WordCamp Developers
2011-05-05 Vancouver, BC
#WCDev #html5video
Steve Heffernan, VideoJS & Zencoder

4. ~2000 ~2008 ~2015

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

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

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

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. OPEN CLOSED

19. CONTAINER FORMAT
VIDEO CODEC
AUDIO CODEC

20. MP4
H.264
AAC

21. OGV
THEORA
VORBIS

22. WEBM
VP8
VORBIS

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

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

26. One Format
3+ 9+ 9+

27. Handbrake.fr

28. Firefogg.org

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

30. VideoJS.com

31. VideoJS WordPress Plugin

32. Degradable HTML5 audio and video

33. VideoJS Pro

34. [video mp4="myVideo.mp4"]

35. Video for Everybody
By Kroc Camen

36. Dive into HTML5
By Mark Pilgrim

37. HTML5 Video and Audio in Depth
http://videojs.com/lynda

38. HTML5 Video for WordPress
slideshare.net/steveheffernan
@videojs
#WCDev #html5video
Steve Heffernan, VideoJS & Zencoder