Yahoo! appears to be converting all their MOV trailers into MP4, so I apologize if people are seeing duplicate trailers from our site.
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
<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
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.
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.
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:
Any comments and feedback are welcomed.