HTML5 video, falling back to Flowplayer

html5video.html

<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>