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.

Upgrade to HTML5 Video

953 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Upgrade to HTML5 Video

  1. 1. Upgrade to Video WEB 2.0 EXPO 2011-03-31 San Francisco, CA #html5video #w2e Steve Heffernan, VideoJS & Zencoder videojs.com
  2. 2. Video for Everybody By Kroc Camen
  3. 3. Dive into HTML5 By Mark Pilgrim
  4. 4. http://blog.mefeedia.com/html5-feb-2011
  5. 5. ~2000 ~2008 ~2015
  6. 6. <video src="video.webm" controls></ video>
  7. 7. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"></video>
  8. 8. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"></video>
  9. 9. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> <object type="application/x-shockwave-flash" data="flash.swf"> <param name="movie" value="flash.swf" /> <param name="flashvars" value="file=video.mp4" /> </object></video>
  10. 10. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> <object type="application/x-shockwave-flash"data="flash.swf"> <param name="movie" value="flash.swf" /> <param name="flashvars" value="file=video.mp4" /> <img src="image.jpg" alt="title" title="Can’t play video" /> </object></video><p> <strong>Download Video:</strong> <a href="video.mp4">MP4</a> <a href="video.ogv">Ogg</a></p>
  11. 11. Embed Builder
  12. 12. CONTAINER FORMAT VIDEO CODEC AUDIO CODEC
  13. 13. MP4H.264AAC
  14. 14. OGVTHEORAVORBIS
  15. 15. WEBM VP8VORBIS
  16. 16. Three Formats3+ 9+ 9+4+ 6+ 10.6+3.5+ 3+ 10.5+
  17. 17. Two Formats3+ 9+ 9+4+ 6+ 10.6+
  18. 18. One Format3+ 9+ 9+
  19. 19. Handbrake.fr
  20. 20. Firefogg.org
  21. 21. MiroVideoConverter.com
  22. 22. FFmpeg.org
  23. 23. Zencoder.com
  24. 24. Browser & Device Issues •iPad Poster Attribute Bug •iPad JS in Head / iPhone JS not in Head •Android Type Attribute Bug •Autobuffer => Preload •Missing Poster in Some Safari Versions •Cross-browser Load Progress Tracking •HTML5 Browsers Do Not Fallback on Incompatible Sources
  25. 25. Demo
  26. 26. VideoJS - 3 Pieces •HTML Embed Code (Video for Everybody) •Javascript Library (video.js) •CSS Skin (video-js.css)
  27. 27. JavaScript Library •Custom Controls •Added Features •Browser & Device Fixes
  28. 28. Custom Controls
  29. 29. JavaScript LibraryADDED FEATURES •Volume Control •Full-window Mode •Subtitles
  30. 30. CSS Skin
  31. 31. CSS Skin
  32. 32. CSS Skin
  33. 33. CSS Skin
  34. 34. CSS Skin
  35. 35. Resources Video for Everybody camendesign.com Dive into HTML5 diveintohtml5.com VideoJS Blog videojs.com/blog VideoJS Support help.videojs.com
  36. 36. Upgrade to Video videojs.com @videojs

×