We’ve been looking to switch to HTML5 video for sometime, but because Firefox doesn’t support video/mp4 (H.264), we’ve been waiting to see what the final outcome for HTML5 video is. Anyway, I decided to see if there was a way to fall back to Flash if HTML5 mp4 video wasn’t supported.

JW player recently announced that it now supports HTML5 video, with fallback to flash. In concept, it’s a really cool idea. You define if you want to use HTML5 as default and fallback to Flash or vice versa. I created some test pages, but unfortunately, there still seems to be some issues as I was hitting into different bugs running on different browsers.

I then started searching online on how other people dealt with HTML5 video with Flash fallback. Lots of sites recommend including the Flash <embed> or <object> inside the <video> element, but it turns out only browsers that don’t recognize the video tag would render that. In other words if I provided a mp4 video source, it won’t fallback to Flash in Firefox because Firefox recognizes the <video> tag.

After digging around a bit more, the correct logic in JavaScript appears to be:

if( !!document.createElement('video').canPlayType )
{
    var can_play_type = document.createElement('video').canPlayType('video/mp4');
    var browser_supports_mp4 = can_play_type == 'probably' || can_play_type == 'maybe';
}

Initially I had it to return true to only probably, but Chrome, Safari, and IE all returned ‘maybe’ instead of probably. I wonder if I included an audio codec, the return value would be different. Only Firefox returned an empty string which is the correct response if a browser doesn’t support the given codec. The problem with this is that IE also returns maybe, but it can’t seem to actually play trailers from Yahoo! or MovieFone.

In the midst of researching, I landed on VideoJS, and remember Derek had mentioned about it. It’s very similar to JW Player, but backed by the open source community. So I started looking into it and doing a test page. It pretty much worked right out of the box. I did make a couple tweaks here and there to get it to behave the way I want. Looking at it’s logic, it pretty much did the same thing I suggested above.

One of the tweaks we added was in the event neither HTML5 video or Flash was available, we would display the following error:

Given that it had the same logic as I did, that also meant the IE issue was there, which meant I had to special case Internet Explorer, and make it always use Flash.

There has been another issue I’ve been trying to deal with and that is it’s practically impossible to escape from full screen mode in Chrome. If you missed the initial flash that says to exit full screen mode, hit F11 (or ⌘⇧F in Mac), you’re pretty much stuck. Hitting esc won’t work. It doesn’t seem to use the custom skin which has the toggle full screen mode key. When I first hit this issue, I ended giving up and quitting the app. The next time, I found opening a new tab forces the video exit full screen mode.

So if you’re using Chrome or Safari, let us know what you think of the new HTML5 video player.