Playing an FLV video with a fallback on HTML5

Question

I told my boss to use HTML5 with a fallback on FLASH.

But he said he wants FLASH as the first option, and if the browser (ipad or any other) can't recognize the FLASH , it should play the MP4 file we got.

I suggested HTML5 with fallback on Flash. But he wants the opposite.

How can I get that done ? Do you guys have sample code ?

Solution Using SWFObject (google it) and a SWF Controller (like FlashMediaPlayback.swf). It's very important to understand that the iPad has limitations with video size. So the MP4 file can't be bigger than 720p and 160kbps for audio.

I'll post my code right below. You can make it yours and use it your own way.

<div style="text-align:center" >
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
    var flashvars = {};
    flashvars.src = "demo.flv";
    flashvars.controlBarMode = "floating";
    flashvars.autostart="true";
    var params = {};
    params.allowfullscreen = "true";
    params.allowscriptaccess = "always";
    params.bgcolor = "#1a1a1a";
    params.scale = "showall";
    var attributes = {};
    swfobject.embedSWF("demo_controller.swf", "videoDiv", "920", "560", "10.1.0", "expressInstall.swf", flashvars, params, attributes);
</script>

<div id="videoDiv" style="text-align:center">
<video controls="controls" width="720" height="480">
<source src="demo.mp4" type="video/mp4"/>
<source src="demo.ogv" type="video/ogg"/>
</video>
</div>
</div>

Answer 1

If you use SWFObject I guess you could put a video tag in the div that SWFObject replaces with Flash if Flash is installed.

Answer 2

Video player creators are calling this "fall-forward", which may help in your search.

I'd encourage you to look at some of the existing solutions, which often wrap the flash player in an HTML5-like API for better compatibility. The Kaltura HTML5 beta has a fall-forward example at http://www.kaltura.org/advanced-examples.