May 31, 2014
Chris
Comments Off on Crossbrowser-safe HTML5 video (IE6+) with a few lines of code and just one .mp4 video file

Crossbrowser-safe HTML5 video (IE6+) with a few lines of code and just one .mp4 video file

shadow dom

No time to read the full article ? Get the code directly here on GitHub: panique/html5-video.

Publishing a video on the web is a massive pain in the ass. Even in 2014, several years after HTML5 video was implemented in major browsers, it’s still not that easy, there’s still no de facto standard on how to do this and there’s no good solution / recommendation on StackOverflow. While trying to find a way to implement videos on websites that will run flawlessly in EVERY browser, from IE6 to latest ones and even on most modern smartphones, I’ve been stumbling over an interesting project that provides a definitive crossbrowser-safe HTML5 video solution:

The (totally awesome) person behind the Video For Everybody Generator (fun-fact: site itself is broken in all IE, but the code generated works perfectly in IE6+) has created a simple interface that let’s you enter the paths to your video file(s), your optional cover picture and optional video download links and generates a crossbrowsersafe block of copy&paste-code that contains a HTML5 video element and the according links to an .mp4 file (and optional .ogv and .webm video files) with a nice flash fallback. That’s it. They even let you chose from different flash players: JW player, FlowPlayer and FlashFox. Unfortunatly, the generated code hotlinks to the servers of JW player, FlowPlayer or GoogleCode, which might break if the files go offline, and it’s surely also a legal issue. Hotlinking is never cool. Beside, JW player is a commercial solution now and doesn’t offer a freely downloadable flash player anymore (afaik). FlashFox looks really good, but is broken in older IE versions, so it’s not an option. FlowPlayer has also become a commercial script, BUT they still offer a totally free version, free to download, free for private and commercial projects.

Further in the article we’ll create an improved, minimal version that uses only one .mp4 file, and runs completely with free open-source software that is locally hosted, but first let’s have a look on the output of the Video For Everybody Generator:

 

The fully crossbrowser-safe HTML5 video version with a flash fallback

First, let’s have a look on the “full” version that follows the official (hmm… is it really official ?) way to implement HTML5 video (with .mp4, .ogv and .webm video files), we’ll go on with the “minimal” version in a minute (sorry for the ugly line breaks): The encoding in the param tag is intented, it’s ugly but necessary. %2F stands for a slash /

<!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody -->
<video controls="controls" 
       poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" 
       width="640" height="360">
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
    <source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
    <object type="application/x-shockwave-flash" 
            data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" 
            width="640" height="360">
        <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
        <param name="flashVars" 
               value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" />
        <img alt="Big Buck Bunny" 
             src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" 
             width="640" height="360" 
             title="No video playback capabilities, please download the video below" />
    </object>
</video>
<p>
    <strong>Download video:</strong> 
    <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">MP4 format</a> | 
    <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv">Ogg format</a> | 
    <a href="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm">WebM format</a>
</p>

We see a HTML5 video element with  sources in mp4, webm and ogv (note that mp4 comes first, as the first playable format is played by the browser, the rest is dismissed). The fourth “source” is a perfect implementation of an on-the-fly loading of a flash player, which then gets options passed. The fourth param is contains … well… params that contains the path to the .mp4 file we want to play (using the .mp4 for the flash player is the best option here) etc.. The img tag is a fallback in case flash fails. Please note that every flash player has a different syntax of the param tag values. Below the video tag we see some linke links for manual downloads of the file(s). The official page of the used free open-source Flash says “it’s a player for Firefox” but it works perfectly on any tested browser that supports Flash.

This is a quite good solution! I’ve seen this working in every tested browser, even on all not-extremely outdated mobile browsers (so it also works on Windows Phone 7).

Potential problem #1: Windows Phone 7 (and 7.5) comes with Internet Explorer Mobile 9 that plays .mp4 nativly. But there is an issue on that, the .mp4 video file needs to be encoded with H.264 (which is quite standard), other encoding formats will not work on Internet Explorer Mobile 9. See this official blog post for more information.

Potential problem #2: People without installed Flash will not see any videos in IE6, IE7 and IE8. But that’s not a real problem, as that’s the pure reality. There simply was never a possibility to view videos in these browsers without flash. I’m just saying this as I’ve worked for clients that seriously asked to “show videos in IE6 even for people that don’t want to install flash”.

 

The minimal, cleaned and 100% legal self-hosted version (the better one!)

Let’s reduce this code block to a minimum, make it legally untouchable, host everything locally and also get rid of any other video files than the .mp4! In the above example code the Flash player is loaded directly from Flowplayer’s servers, which is not future-proof (as they might take it offline) and might also be a legal issue. I’ve prepared this in the GitHub repository html5-video. Download the .zip now, extract it and put it on your server to follow the example below, which is the body content of the according demo.html:

<video controls="controls" poster="img/demo.jpg" width="640" height="360">
    <!-- .mp4 file for native playback in IE9+, Firefox, Chrome, Safari and most mobile browsers -->
    <source src="vid/demo.mp4" type="video/mp4" />
    <!-- flash fallback for IE6, IE7, IE8 and Opera -->
    <object type="application/x-shockwave-flash"
            data="swf/flowplayer-3.2.18.swf" 
            width="640" height="360">
        <param name="movie" value="swf/flowplayer-3.2.18.swf" />
        <param name="allowFullScreen" value="true" />
        <param name="wmode" value="transparent" />
        <!-- note the encoded path to the image and video files, relative to the .swf! -->
        <!-- more on that here: http://en.wikipedia.org/wiki/Percent-encoding -->
        <param name="flashVars"
               value="config={'playlist':['..%2Fimg%2Fdemo.jpg',
                             {'url':'..%2Fvid%2Fdemo.mp4','autoPlay':false}]}" />
        <!-- fallback image if flash fails -->
        <img src="img/demo.jpg" width="640" height="360" title="No Flash found" />
    </object>
</video>

Okay, what do we see ? We have a folder img containing the demo.jpg (that is used as a cover image), a folder vid containing the demo.mp4 video file and a folder swf that contains the flash player file(s), one is the player itself, the other is for the optional player controls (which is autloaded by the flash player). Don’t touch the swf folder unless you know what you do.

Everything here is basically self-explaining. The fourth param element inside the object element (which is the flash player) is interesting: It defines the options of the flash player, in this case only the paths of the .jpg and the .mp4 are interesting:

..%2Fimg%2Fdemo.jpg

looks weird, but is just the URL-encoded version of the path

../img/demo.jpg

More on that – including a URL encoder/decoder here on W3Schools.

Now we still have a fully crossbrowsersafe solution, completely fully locally hosted and 100% independent! All modern browsers will play the .mp4 natively, the rest will use flash to play the video. Users with totally outdated or exotic browsers that ALSO don’t have flash installed will not see the video. But, these users will in general not see any videos on the web, so we seriously don’t give a fuck here. The .mp4 file will play natively on IE9, IE10, IE11, Firefox, Chrome, Safari, iOS Safari, Android 4.4 Stock Browser, Blackberry’s browser, Opera Mobile, Chrome for Android, Firefox for Android and Internet Explorer Mobile 10. For a full list of supported browsers and versions check CanIUse.com – MPEG4/H264.

It will play back on Internet Explorer Mobile 9 when the file is encoded properly with the h264 codec (which is standard). To make it work with old Android versions (2.3+ < 4.4) it might need fixes, like described in this article. However, i’ve never had problems playing .mp4 in Android, even years ago. Also not that CanIUse says Firefox does only support mp4 playback “partially”, but as you can see in the demo on v4e.thewikies.com the mp4 playback on Firefox is excellent.

The only possible “problem”: Users with Opera Desktop that DON’T have Flash installed will not be able to see the video. Side-fact: Opera Mobile can play back nearly any video format, but Opera Desktop can not. But c’mon, who uses Opera ? And who of them hasn’t Flash installed ? If you really need to server native HTML5 video playback to these people, then add the according .ogv and/or .webm file (both will work for opera) with

<!-- note the .ogv format but the ogg mime type --> 
<source src="vid/demo.ogv" type="video/ogg" />

For transcoding .mp4 to .ogv and .webm any video converter will do, I can recommend Any Video Converter. The website looks weird, but the tool is worth the money. A free alternative is MIRO. However, you don’t need this when just using pure .mp4 playback.

 

“This does not work”

This works perfectly and has survived serveral high-traffic real-life scenarios. When testing, make sure you DON’T simply open a .html file (that lays on your desktop) containing the above code with a double-click.  This will not work due to flash’s security restrictions. Always make sure you are running in a real environment, like any server (that has an public accessable IP or domain) or on localhost/127.0.0.1! Again: Flash stuff will probably not work if you open a file directly from the operating system’s path, like D:\test\videoplayer.html.

To test the flash video player alone (without the HTML5 part) simply remove everything around the flash object.

 

Something to improve ?

If you think parts of this solution need work or fixing, then please comment or write a ticket on GitHub.