Upgrade to HTML5 Video
- 1. Upgrade to Video WEB 2.0 EXPO 2011-03-31 San Francisco, CA #html5video #w2e Steve Heffernan, VideoJS & Zencoder videojs.com
- 3. Video for Everybody By Kroc Camen
- 4. Dive into HTML5 By Mark Pilgrim
- 10. ~2000 ~2008 ~2015
- 11. <video src="video.webm" controls></ video>
- 12. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> </video>
- 13. <video controls> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> </video>
- 14. <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>
- 15. <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>
- 16. Embed Builder
- 18. CONTAINER FORMAT VIDEO CODEC AUDIO CODEC
- 19. MP4 H.264 AAC
- 21. WEBM VP8 VORBIS
- 23. Three Formats 3+ 9+ 9+ 4+ 6+ 10.6+ 3.5+ 3+ 10.5+
- 24. Two Formats 3+ 9+ 9+ 4+ 6+ 10.6+
- 25. One Format 3+ 9+ 9+
- 26. Handbrake.fr
- 27. Firefogg.org
- 29. FFmpeg.org
- 30. Zencoder.com
- 31. 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
- 33. Demo
- 34. VideoJS - 3 Pieces •HTML Embed Code (Video for Everybody) •Javascript Library (video.js) •CSS Skin (video-js.css)
- 35. JavaScript Library •Custom Controls •Added Features •Browser & Device Fixes
- 36. Custom Controls
- 37. JavaScript Library ADDED FEATURES •Volume Control •Full-window Mode •Subtitles
- 38. CSS Skin
- 39. CSS Skin
- 40. CSS Skin
- 41. CSS Skin
- 42. CSS Skin
- 43. Resources Video for Everybody camendesign.com Dive into HTML5 diveintohtml5.com VideoJS Blog videojs.com/blog VideoJS Support help.videojs.com
- 44. Upgrade to Video videojs.com @videojs
Editor's Notes
- #2: \n
- #3: \n
- #4: \n
- #5: \n
- #6: \n
- #7: \n
- #8: \n
- #9: \n
- #10: \n
- #11: \n
- #12: \n
- #13: \n
- #14: \n
- #15: \n
- #16: \n
- #17: \n
- #18: \n
- #19: \n
- #20: \n
- #21: \n
- #22: \n
- #23: \n
- #24: \n
- #25: \n
- #26: \n
- #27: \n
- #28: \n
- #29: \n
- #30: \n
- #31: \n
- #32: \n
- #33: \n
- #34: \n
- #35: \n
- #36: \n
- #37: \n
- #38: \n
- #39: \n
- #40: \n
- #41: \n
- #42: \n
- #43: \n
- #44: \n
- #45: \n