1. Building an HTML5 Video Player
HTML5 Developer Conference 2012
#html5video
Steve Heffernan, Video.js & Zencoder & Brightcove
http://videojs.com
@heff @videojs
41. Browser/General Issues
â˘Autobuffer => Preload
â˘Cross-browser Load Progress Tracking
â˘Missing Poster in Some Safari Versions
â˘HTML5 Browsers Do Not Fallback on
Incompatible Sources
43. Determine Video Support
<script>
var vidTag = document.createElement("video"),
ďŹashVersion = swfobject.getFlashPlayerVersion();
if (vidTag.canPlayType && vidTag.canPlayType("video/mp4")) {
// Video Tag
} else if (ďŹashVersion.major > 9) {
// Flash Object
} else {
// No Video Support
}
</script>
SWF Object: http://code.google.com/p/swfobject/
44. Device Quirks: iOS 3
⢠Needs MP4 as ďŹrst source.
⢠iPad Poster Attribute Bug
⢠iPad JS in Head / iPhone JS not in Head
45. Device Quirks: Android 2.1 / 2.2
⢠Canât touch to start
⢠Type attribute breaks video
⢠canPlayType function broken
~25% of Android Users
47. Android Type Attribute Fix Options
⢠Donât include type attribute
⢠Donât use source tags
<video src="video.mp4" controls></video>
⢠Set source through JS API
video.src("video.mp4")
53. Building an HTML5 Video Player
HTML5 Developer Conference 2012
#html5video
Steve Heffernan, Video.js & Zencoder & Brightcove
http://videojs.com
@heff @videojs