Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Video Tag MinneWebCon presentation

575 views

Published on

  • Be the first to comment

  • Be the first to like this

Video Tag MinneWebCon presentation

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

×