Created
September 8, 2010 14:07
-
-
Save beastaugh/570172 to your computer and use it in GitHub Desktop.
HTML5 video, falling back to Flowplayer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div id="video-1-container" class="video"> | |
<video id="video-1" src="video/html5.mp4" width="480" height="204" controls> | |
<!-- HTML5 video, for compatible browsers --> | |
</video> | |
</div> | |
<script type="text/javascript"> | |
Ojay.onDOMReady(function() { | |
// The video and the container need separate IDs to work around IE6's | |
// unwillingness to locate video elements. | |
var video = Ojay.byId('video-1'), | |
node = video.node, | |
wrapper = Ojay.byId('video-1-container'), | |
opts; | |
// Can't find the video element, so return early. | |
if (!node) return; | |
if (typeof node.canPlayType == 'function' && | |
// Supports H264 video. | |
(node.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"') || | |
// Android 2.1 supports the codecs but incorrectly reports that it doesn't. | |
window.navigator.userAgent.match(/Android 2\.[1-9]/))) | |
{ | |
// An explicit call to 'play' is needed for Android devices. | |
node.addEventListener('click', function() { | |
node.play(); | |
}, false); | |
// The browsers that support HTML5 video and H264 should bail at this point. | |
return; | |
} | |
// Set autoBuffering to false if you don't want the video downloading as soon | |
// as the user visits the page. Add a preload="none" attribute to the video | |
// element to do the same for HTML5 video. | |
opts = {clip: {url: node.src, autoPlay: false, autoBuffering: true}}; | |
// Set the global FLOWPLAYER_API_KEY to your Flowplayer API key; this will | |
// remove Flowplayer branding. | |
if (window.FLOWPLAYER_API_KEY) opts.key = FLOWPLAYER_API_KEY; | |
wrapper.setStyle({ | |
width: node.width + 'px', | |
height: node.height + 'px' | |
}).setContent(''); // To embed the Flash object, the element must be empty. | |
try { | |
flowplayer(wrapper.node, 'flash/flowplayer-3.2.4.swf', opts); | |
} catch(e) { | |
if (window.console && typeof console.error == 'function') { | |
console.error(e); | |
} | |
} | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment