More Related Content Similar to Upgrade to HTML5 Video (20) Upgrade to HTML5 Video1. Upgrade to Video
WEB 2.0 EXPO
2011-03-31 San Francisco, CA
#html5video #w2e
Steve Heffernan, VideoJS & Zencoder
videojs.com
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>
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
34. VideoJS - 3 Pieces
•HTML Embed Code
(Video for Everybody)
•Javascript Library (video.js)
•CSS Skin (video-js.css)
43. Resources
Video for Everybody
camendesign.com
Dive into HTML5
diveintohtml5.com
VideoJS Blog
videojs.com/blog
VideoJS Support
help.videojs.com
Editor's Notes \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n