Home > Flash, Video > Flash to HTM5 fallback

Flash to HTM5 fallback

After the debate around what it’s better at serving video between Flash and HTML5 I have found a lot of code in the Internet on how to serve video in HTML5 with a Flash fall back.

Independently by the fact that the debate is far from being concluded, I think that it’s a nonsense to check first for HTML5 and then for Flash instead of the contrary. Let’s follow this simple reasoning:

Today you have Flash Player in 98% of the desktops and on Android 2.2. Even excluding the fact that in a few months it will be available on RIM OS, Web OS, Windows Phone 7, Samsung and Sony connected TVs and Google TVs, the penetration of Flash Player is very very high because the computer’s desktop is still the most important place where Internet video are consumed.

The performance of Flash on these platforms is very good and I’m not speaking only about pure Fps or CPU usage statistics, but overall performance including video control, personalization, easyness of development, advertising compatibility, content protection and QoS. And now with StageVideo API the performance is very very good on Mac too.

On the other hand you have HTML5 which is a compact, standard and effective technology for video… Sorry, I correct myself: It WILL BE standard and effective because now it is a mess with every vendor implementing (or anticipating) the standard in its own way.  It works well on Mobile, especially on  iOS devices (even if the implementation does not adhere completely to the ‘draft’ standard), but on the desktop (over a Billion screens) it simply doesn’t work today, at least for video delivery.

The scenario is clear: On Desktop we have 50% of IE (sub 9) browsers who do not support HTML5 at all. 35% of Firefox browsers who support at the moment only Theora for video. Only Chrome and Safari seem to work flawlessly with HTML5, but yesterday Google has complicated everything announcing that Chrome will drop the support to H.264 in favor of VP8.  It is definitely not a good scenario…

Therefore, I wonder, why should I serve my video first to HTML5 and THEN to Flash ? that would be crazy.

Use HTML5 as a Flash fall-back

You know that I develop video encoding pipelines as well as video delivery platforms and optimizations. So for my clients I propose Flash based players (custom or OSMF based). With Flash, not only they have the widest audience possible, but even a great and consistent interactive experience. Furthermore, one very important point for top media companies is content protection, and with Flash you can protect content in several ways. This is not possible today using HTML5 (indeed it’s also not possible to stream, you have only progressive dowloading), only iOS devices support a not standard streaming and protection schema.

But the new “Mobile Wave” cannot be ignored. Everyone want to watch video on iPhone, iPad or Android. And also BlackBerry, Symbian and Windows Mobile devices need to be served in some way.

So, what I propose to my clients ?  The following Fall-Back approach:

IF The device has Flash (Desktop + Android2.2) THEN
stream using Flash with Dynamic Streaming / Interactivity / Protection.
……IF The device supports HTML5 (iOS, Android, etc…) THEN
………stream (on iOS) or progressive download (on Android and other webKit based browsers).
………serve video in a low end format for other devices in progressive downloading.

This kind of multiple fall-back schema can be achieved in several way. I like to use a compact schema, easily applicable for video that can be embedded in external pages. The example below uses the fall back feature of the HTML tag <object> and HTML5 tag <video>:

<object id="VideoPlayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,0,0" width="600" height="400" >
 <param name="movie" value="videoPlayer.swf?videoID=10" />
 <param name="quality" value="high" />
 <param name="allowfullscreen" value="true" />
 <param name="allowscriptaccess" value="always" />
 <param name="wmode" value="opaque">
 <object type="application/x-shockwave-flash" data="videoPlayer.swf?videoID=10" width="600" height="400" >
 <param name="movie" value="videoPlayer.swf?videoID=10" />
 <param name="quality" value="high" />
 <param name="allowfullscreen" value="true" />
 <param name="allowscriptaccess" value="always" />
 <param name="wmode" value="opaque">
 <video controls preload width="600" height="400" poster="thumbnail.jpg" >
 <source src="iPhoneVersion.m3u8" type="video/mp4" />
 <source src="AndroidVersion.mp4" type="video/mp4" />
 <a href="LowEndMobileVersion.3gp">
 <img src="thumbnail.jpg" /></a>

First of all I have used two nested <object> tag which is one of the techinque for embedding the Flash Player in an HTML page. The first is for IE, the second (in fall back) is for FF, Chrome and the others (Change videoPlayer.swf?videoID=10 to your video player of choice). If even this second tag fails you are probably on a mobile device or on a tablet so it’s logic to try the HTML5 <video> tag which works in IOS devices, Android and other OS with webkit based mobile browsers. The video tag allows to specify a list of possible video sources and tries to access them in sequence. Here I propose at first the Apple HTTP Live streaming technique serving the iPhoneVersion .m3u8 manifest file and only if this is not supported by the device I fall back to a progressive downloaded video in .mp4 format called AndroidVersion.mp4 (for Android, WebOS, RIM OS6, etc…). If even the <video> tag fails you are probably on a early version of Android, Symbian, BlackBerry or Windows Mobile so a low end version of video is served in progressive downloading (LowEndMobileVersion.3gp).

This approach guarantee the best performance on desktop (Flash Player, streaming with bitrate switching, advanced QoS and protection) and on iOS (Apple HTTP Live streaming with bitrate switching and protection) where this schema works for both live and ondemand video. On the rest of the devices you can still serve on demand video without protection. It’s your video platform that must selectively built the right fall-back schema to exclude the lower version of video when it must be protected or if it is a live streaming.

Categories: Flash, Video
  1. max
    12 January 2011 at 11:32 pm

    Let me play the devil advocate…

    Maybe this is a reason not to do it? http://punto-informatico.it/3067955/PI/News/bucata-sandbox-flash.aspx

    • Tomas
      13 January 2011 at 11:12 am

      There is no perfect software without bugs. If you read the details it is not so critical. If all browsers had all functionality that ever needed, wouldn’t they become very bloated and complex? Flash push the limits and it become a standard 10 years later. Good article btw.

  2. Ralph Brettschneider
    18 January 2011 at 5:50 am

    First, I congratulate you on your achievement of exceptional resolution and quality at such low bit rates. I’m impressed. I’ve encoded over 500 movies and clips to post on my family web site evolving my techniques toward better and better image quality over time. I’ve become somewhat familiar with the challenges of low bit rate encodes.

    I’m very interested in what video quality can be achieved at the lowest possible bit rates. I gave up using ffmpeg a year ago in favor of x264 for my mp4 encodes. What is your experience with x264 compared to ffmpeg?

    I notice that your sample videos lack mosquito noise and other edge effect artifacts that are endemic with low bit rate encodes. How do you manage to prevent edge artifacts. Similarly, how are you preventing haloing that always seems to accompany sharpening? I find that noise reduction and sharpening together reallocates limited bit rate toward image elements that give the impression of heightened resolution. So I always try to use controlled sharpening and noise reduction.

    I use avisynth as the front end for x264. I’ve tried every avisynth and virtualdub sharpening and noise reduction filters and scripts published on the Internet to address these issues with only limited success. What sharpening and dehaloing tools and scripts do you use?


  3. 9 February 2011 at 9:41 pm

    I think your strategy for fallback is straight on. I would like to test the code implementation you’ve provided using JW Player. Can I simply plug in their 5.4 player in where your code calls for a .swf or is there more to it?

    • sonnati
      10 February 2011 at 3:14 pm

      It should be possible, but I think that JW has recently introduced a native fallback flow.

  4. 28 July 2011 at 4:16 pm

    This is exactly the kind of thing I’ve been looking for, since I have had the same thoughts about the natural order of fallback. I’m trying your technique here, which seems pretty straightforward, but I am having one problem.

    In some browsers the fallback doesn’t seem to work the way I hope, and it ends up playing the Flash, but with the HTML5 video playing underneath it, as best I can tell – I see the Flash video, but I hear the audio for both! In Chrome and Safari, it plays the mp4 under it; in Firefox, it plays the webm version… but always under the Flash. In fact, in Chrome, it gives me the “broken plug in” gray box on top of the HTML5 video that is playing underneath it.

    Have you run into this issue? Is it something obvious that I am doing? Or does Flash fallback just not work that way? Could this be the reason people use HTML5 first, or swfObject, etc?



    • Alex
      11 October 2011 at 1:59 pm

      I’ve run into this same issue with both videos playing (flash and html5 vdieo underneath). Any suggestions would be appreciated. Do you think a flash detection approach would be better, and then serve the appropriate media, at least the flash vs. fallback?

  5. JamesB
    18 August 2011 at 7:41 pm

    Great post! How would you alter the above using swfobject with progressively downloaded flv’s?

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: