1. <video> will be your friend
Joy Through “Standards”

2. Overview
• What is the video tag
• Why you can’t use it
• Why you’ll use it anyways

3. What is the Video Tag
• <video> makes video a first class citizen
• Part of the HTML5 specification
• As simple as <img>

4. Why You Can’t Use it
• Compatibility
• User Experience

5. Compatibility
• <video> standard does not mandate a format
• Just like the <img> tag

6. Two Primary Formats
Theora
H.264

7. Two Primary Formats
Theora : ogg
H.264 : mov/mp4/m4v

9. Taking sides
H.264 OGG
*

10. H.264
• Modern
• Scalable
• Efficient

11. But...
• Patented
• Royalty’d

12. Licensing
• MPEG-LA manages a patent pool
• Costs for Encoding, Decoding and
potentially performance

13. Licensing
• MPEG-LA manages a patent pool
• Costs for Encoding, Decoding and
potentially performance

14. What if you’re Firefox?
• Hard to pay a license cost
• Need cross platform support
• Values

15. What if you’re Firefox?
• Hard to pay a license cost
• Need cross platform support
Software Patents
• Values make me sad

16. OGG to the Rescue?
• On2 open sourced VP3, released patent
claims
• Xiph.org group turns it into Theora
• Continues to enhance VP3

17. But...
• Technically inferior
• Submarine patents?
• Hardware support

18. What to do?
• Train is leaving the station
• IE9, Chrome, Safari, iEverything are on
board with H.264
• Content producers are on board
• Fallback options exist

19. What to do?
• Train is leaving the station
• IE9, Chrome, Safari, iEverything are on
board with H.264
• Content producers are on board
• Fallback options exist

20. Fallback example
<video>
<source src=“video.mp4” type= “video/mp4” />
<source src= “video.ogg” type= “video/ogg” />
<object width="425" height="350"><param name="movie"
value="myplayer.swf" />
<param name= “flashvars” value= “file=video.mp4” />
<embed src="myplayer.swf" flashvars= “file=video.mp4”
type="application/x-shockwave-flash" width="425" height="350"> </
embed>
</object>
</video>

21. Fallback example
<video>
<source src=“video.mp4” type= “video/mp4” />
<source src= “video.ogg” type= “video/ogg” />
<object width="425" height="350"><param name="movie"
value="myplayer.swf" />
<param name= “flashvars” value= “file=video.mp4” />
<embed src="myplayer.swf" flashvars= “file=video.mp4”
type="application/x-shockwave-flash" width="425" height="350"> </
embed>
</object>
</video>

22. Fallback example
<video>
<source src=“video.mp4” type= “video/mp4” />
<source src= “video.ogg” type= “video/ogg” />
<object width="425" height="350"><param name="movie"
value="myplayer.swf" />
<param name= “flashvars” value= “file=video.mp4” />
<embed src="myplayer.swf" flashvars= “file=video.mp4”
type="application/x-shockwave-flash" width="425" height="350"> </
embed>
</object>
</video>

23. Fallback example
<video>
<source src=“video.mp4” type= “video/mp4” />
<source src= “video.ogg” type= “video/ogg” />
<object width="425" height="350"><param name="movie"
value="myplayer.swf" />
<param name= “flashvars” value= “file=video.mp4” />
<embed src="myplayer.swf" flashvars= “file=video.mp4”
type="application/x-shockwave-flash" width="425" height="350"> </
embed>
</object>
</video>

24. Fallback example
<video>
<source src=“video.mp4” type= “video/mp4” />
<source src= “video.ogg” type= “video/ogg” />
<object width="425" height="350"><param name="movie"
value="myplayer.swf" />
<param name= “flashvars” value= “file=video.mp4” />
<embed src="myplayer.swf" flashvars= “file=video.mp4”
type="application/x-shockwave-flash" width="425" height="350"> </
embed>
</object>
</video>

25. Why you want to use it
• Video can be a rich part of design
• Hardware acceleration
• Cross platform

26. Let’s build a player

27. Video Tag Attributes
preload
autoplay controls
(autobuffer)
height loop poster
src width

28. Video Tag Attributes
preload
autoplay controls
(autobuffer)
height loop poster
src width

29. Video Tag Attributes
preload
autoplay controls
(autobuffer)
height loop poster
src width

30. Video Tag Attributes
preload
autoplay controls
(autobuffer)
height loop poster
src width

31. Javascript Attributes
currentTime startTime duration
paused ended seekable
buffered played volume
muted

32. Javascript Events
progress play pause
playing canplay canplaythrough
ended timeupdate

33. Living The Dream

34. Living The Dream

35. Caveats
• Some mobile platforms won’t run your JS
• Hardware accelerated platforms maybe
limited to one video
• Make sure your server supports file resume

36. Summary
• <video> is coming
• It’s A Good Thing
• There are premade players today -
jilion.com/sublime
• Great javascript helpers - html5video.org

37. @cmcfadden
http://z.umn.edu/lh