Thoughts on branding, design, writing and life by Kevin Potts. Established 2003.

An HTML5 Video Stack Serving Flash First

Here’s a new twist on an old favorite: creating an HTML video stack that serves Flash as the default, and then falls back to h.264, Ogg Theora and Quicktime for browsers who do not have the plug-in installed.

The company I work for has recently been creating a lot of videos, and many of them we are publishing on our site. We have adopted the new HTML5 <video> tag, which is a fantastic bit of tech, but with fresh lemony twist: we’re serving Flash first, and then falling back on native video formats.

“Why?” you ask. “Isn’t Flash an antiquated, rusty, derelict technology currently under fire from Apple and smarty pants web designers?”

Well, there’s a couple of reasons.

FLV is a Good Format

Here’s the reality: Flash is awesome at serving video. The FLV format allows for great quality combined with great compression, and it enables us to create our own custom players that just weren’t possible before the release of the media elements API. So we can skin away, craft custom controls and playback features, and use shell SWFs and flashvars to make the whole operation more modular. A lot of the hype over HTML5 video forgets the simple fact that Flash as video playback technology works.

We Have a Streaming Server

Years ago, we invested (heavily) in a Flash media streaming server, which allows us to deliver near-instant playback because it detects the appropriate bitrate with which to deliver the content. Our site does not pull in massive traffic being a niche B2B player, but no one has ever experienced any kind of lag outside the network, even on crapalicious connections in airports, hotels, or crowded Starbucks.

Most Visitors Have Flash

Crazy! Heretical! But true. An overwhelming percentage of visitors do have Flash installed. But because we work with government agencies and large organizations whose IT departments lock down their constituents’ browsers (no Flash, no JS, sometimes no plugins at all), we have to provide an alternative. And we are also seeing an increase, naturally, from iOS and other mobile devices, where Flash either is not present or exists as a battery-sucking demon.

The HTML Stack

So this is what we’ve settled on, with details removed to protect the innocent:

 <div id="something-unique-if-needed">
  <object class="flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600">
    <param name="movie" value="/path/to/flash-version.swf">
    <!—[if !IE]>—>
      <object type="application/x-shockwave-flash" data="/path/to/flash-version.swf" width="800" height="600">
      <!—[if !IE]>
        <div class="video">
          <video controls="controls" width="800" height="600">
            <source src="/path/to/h264.mp4" type="video/mp4; codecs=&quot;avc1.42E01E, mp4a.40.2&quot;">
            <source src="/path/to/theora.ogv" type="video/ogg">
      <!—[if IE]>
        <div class="mov">
          <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="" width="800" height="600">
            <param name="src" value="/path/to/">
            <param name="autoplay" value="false">
            <param name="type" value="video/quicktime" width="800" height="600">
    <!—[if !IE]>—>


Here’s how it’s working:

  1. Flash gets served first. The SWF player pulls in an FLV sitting on the streaming server.
  2. If the browser is not IE, and Flash is not installed, it reverts to the <video> tag. h.264 comes first for Chrome, Safari and iOS, and then Theora for Firefox and Opera. Since we’re serving Theora, we are set up fine when Chrome stops supporting h.264.
  3. If the browser is IE, and Flash is not installed, it reverts to a plain Quicktime file. This is, admittedly, a very fringe contingency, but we aim to be as accommodating as possible.

This has been tested (and works) in IE 7, IE 8, Firefox, Safari, Chrome, Opera, iPad, iPhone 3 and 4, various Blackberry models, Palm Pre and a few other mobile devices. It’s not perfect, and it will change over the years, but right now it works.

I am currently evaluating WebM, but honestly, I have little interest in a format whose patent is controlled by Google when there is a perfectly good alternative (Ogg Theora) working today.

, , , , ,

commentary + criticism


wrote the following on Friday March 23, 2012

This is what I have come up with. It does the opposite where Flash is the fallback for IE. Even works on IOS 3.1.3. and Droid versions as early as 2.1 EClair:

var video = document.getElementById(‘video’);
<video width=“400” height=“300” controls=“controls” poster=“img/poster.png” onclick=“;” > <source id=“3gp” src=“wedding1.3gp” type=“video/3gp” /> <source id=“mov” src=“” type=“video/mov” /> <source id=“mp4” src=“perfectparties/weddingDroid.mp4” type=“video/mp4” /> <source id=“webm” src=“wedding1.webm” type=“video/webm” /> <source id=“mp4” src=“wedding1.mp4” type=“video/mp4” /> <source id=“ogv” src=“wedding1.ogv” type=“video/ogv” />

<!—[if lt IE 9]> <object id=“FlashID” classid=“clsid:D27CDB6E-AE6D-11cf-96B8-444553540000” width=“400” height=“300”> <param name=“autoplay” value=“false”> <param name=“movie” value=“wedding1.swf”> <param name=“quality” value=“high”> <param name=“wmode” value=“opaque”> <param name=“swfversion” value=“”> <param name=“expressinstall” value=“Scripts/expressInstall.swf”> </object> <!—<![endif]—> </video>