More Related Content Similar to HTML5 Video Presentation Similar to HTML5 Video Presentation (20) HTML5 Video Presentation3. What is the Video Tag
• <video> makes video a first class citizen
• Part of the HTML5 specification
• As simple as <img>
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
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
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