SlideShare a Scribd company logo

HTML5 Video Presentation

•Download as KEY, PDF•
•
S
sith33

The document discusses the <video> tag in HTML5 for embedding video on web pages. It describes the <video> tag, the supported video formats H.264 and Theora, and compatibility issues around browser support and patent licensing. It recommends using H.264 due to broader support from browsers and devices, and providing fallback options like the <object> tag for browsers that do not support <video>. JavaScript can be used to control video playback and handle events. While <video> is not fully compatible across all platforms yet, its support is growing and it allows for richer web content compared to other options.

1 of 37
<video> will be your friend Joy Through “Standards”
Overview • What is the video tag • Why you can’t use it • Why you’ll use it anyways
What is the Video Tag • <video> makes video a first class citizen • Part of the HTML5 specification • As simple as <img>
Why You Can’t Use it • Compatibility • User Experience
Compatibility • <video> standard does not mandate a format • Just like the <img> tag
Two Primary Formats Theora H.264
Two Primary Formats Theora : ogg H.264 : mov/mp4/m4v
HTML5 Video Presentation
Taking sides H.264 OGG *
H.264 • Modern • Scalable • Efficient
But... • Patented • Royalty’d
Licensing • MPEG-LA manages a patent pool • Costs for Encoding, Decoding and potentially performance
Licensing • MPEG-LA manages a patent pool • Costs for Encoding, Decoding and potentially performance
What if you’re Firefox? • Hard to pay a license cost • Need cross platform support • Values
What if you’re Firefox? • Hard to pay a license cost • Need cross platform support Software Patents • Values make me sad
OGG to the Rescue? • On2 open sourced VP3, released patent claims • Xiph.org group turns it into Theora • Continues to enhance VP3
But... • Technically inferior • Submarine patents? • Hardware support
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
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
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>
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>
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>
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>
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>
Why you want to use it • Video can be a rich part of design • Hardware acceleration • Cross platform
Let’s build a player
Video Tag Attributes preload autoplay controls (autobuffer) height loop poster src width
Video Tag Attributes preload autoplay controls (autobuffer) height loop poster src width
Video Tag Attributes preload autoplay controls (autobuffer) height loop poster src width
Video Tag Attributes preload autoplay controls (autobuffer) height loop poster src width
Javascript Attributes currentTime startTime duration paused ended seekable buffered played volume muted
Javascript Events progress play pause playing canplay canplaythrough ended timeupdate
Living The Dream
Living The Dream
Caveats • Some mobile platforms won’t run your JS • Hardware accelerated platforms maybe limited to one video • Make sure your server supports file resume
Summary • <video> is coming • It’s A Good Thing • There are premade players today - jilion.com/sublime • Great javascript helpers - html5video.org
@cmcfadden http://z.umn.edu/lh

More Related Content

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

Editor's Notes