HTML5 Video Presentation
- 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
- 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