HTML5 Video in Chrome and Safari

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:

unsupported browser

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.

720p MP4 Encodes?

Alex wanted to see if there’s any demand for 720p MP4 encodes. Currently, the only MP4 encodes he provides are 1080p. However, if there’s demand for 720p MP4 encodes, he’s willing to consider also encoding those (along with the 1080p MP4 encodes) and uploading them to a file-sharing site.

If you would like to see 720p MP4 encodes (or don’t care), please leave a comment in this post.


Converting .mov to .mp4 Guide

For the past few months, Alex had been providing us with 1080p MP4 HD trailers which you can use to play on your PS3 (PlayStation 3). I thought it’d be neat and in the spirit of this site to provide a guide/tutorial on how he accomplishes the conversion.

Alex has kindly written up a tutorial on how he converts the .mov HD trailers to .mp4 files: Convert .mov to .mp4

He usually uses Quicktime Pro to do the conversion, but since Quicktime Pro isn’t free, he went and searched for a free alternative:

So after a small research, I came across a program called Yamb. Produces the same results as QuickTime Pro… for free!

Alex is also intending to do another tutorial for converting using Quicktime Pro and you can expect that shortly.

We hope you’ll find it useful.


As a continuation from yesterday’s posted guide, Alex has provided an update on how to use QuickTime Pro for the conversion. The guide is still located at:

Convert .mov to .mp4

Any comments and feedback are welcomed.

Two New Members to the Team

I’d like to welcome 2 new members to our team: Manjunath and Alex

Awhile back, you may have remembered that I started on a side project that would provide mirroring to the HD trailers I posted. However, that took up too much of my time, and was ultimately abandoned. After that news was posted, Manjunath contacted us expressing interest in continuing to provide mirror links. At first I asked him to post the links in the comment section, but that didn’t really work out that well as Akismet was constantly blocking them, even when I had registered him as a subscriber.

Around the same time, Alex contacted us expressing interest in providing MP4 encodings of the HD trailers that people can use to watch on their Xbox 360 and PlayStation 3.

I needed a way to allow users to modify posts directly without giving them too much power. That’s when I found: Role Manager plugin for WordPress. It had exactly what I needed, specific knobs to enable/disable for particular users.

I have then created a new role: InfoAdder which has the ability to edit others’ published posts and save them. Soon, you’ll be seeing 2 new sets of links:

  • RapidShare Mirror:
  • MP4 Encoded: