How to make cross browser full screen HTML5 video work right

I’ve been tasked with integrating quite a few full screen videos in recent projects lately. While the HTML5 video support is slowly evolving, browser support is still very individual and requires putting the video on the server in a lot of different formats as well as provide a Flashplayer fallback for older browser generations.

Why so complicated?

There is lots of good documentation on HTML5 Video support online though, the Chapter on Video Integration in Mark Pilgrim’s Dive into HTML5¬†for example gives a deep insight into the different codecs supported by the different browsers and some historical information on why everything has gotten so complicated. It also offers instructions on how to encode video in the different formats needed for clean cross browser support.

The easy way to integration

While Mark Pilgrim’s article serves you with every bit of information needed to get HTML5 video up and running nicely, there’s another nifty tool out there which makes the implementation child’s play. Video.js is a pretty much the all in one solution for cross browser HTML5 video playback – including Flashplayer fallback, CSS Skins and a nice Javascript API for various playback functions. Their 5 second setup will have your video running in no time, provided you encoded the video in the different formats needed (basically H.264, Ogg Theora and WebM).

Full Screen Action

In order to make the video display in full screen all the time, regardless of browser size, this little piece of javascript should serve you well:

This snippet will take your video (taken it was correctly implemented with video.js and given the id ‘my_video_1’) and automatically adjust it’s width and height to match the current browser window on resize. The code is made for 16:9 aspect ratio, if your video has a different ratio, just adjust the code accordingly.

Possible pitfalls

During the process of embedding HTML5 video correctly, i ran into a few problems which gave me a big headache at first. Some browsers act weird in combination with different MIME types of different video files. I finally found the solution in this discussion thread on the video.js boards. The best thing to do is to take the .htaccess file included in the HTML5 Boilerplate package (which is a hugely useful tool by itself and should be discussed another time) and put it in the root of your webhost (which hopefully is allowed to parse and load .htaccess directives). This will configure all MIME types correctly and should get the video running in all the browsers.

Also, the order in which you define the different sources for the differently encoded videos inside the video-tag is of some importance. Make sure you put the H.264 first, followed by the .ogv and the .webm file – this will make sure that the browser tries to play the best quality video first and only result to lesser quality codecs when it can’t play the latter ones.

Conclusion

I hope this article will help anyone trying to find a quick and easy solution for a cross browser HTML 5 video integration. Corrections and pointers on how to further improve the integration are welcome!

Leave a Comment.