FLASH FIRST?

Last time we looked at making your HTML5 video degrade to a flash player.  This post will look at how to default to the flash player and fall back to links to the HTML5 video for the smaller segment that do not have flash enabled on their browser or are viewing on their iPhone or iPad.  All I did was convert my source video to flash (FLV), H.264 (MP4), and Ogg (OGV).  I set up my flash player to run as usual, but instead of giving those without flash a link to get flash, I give them two links.  One will let the Safari and Chrome crowd, including those with hand-held devices, watch the MP4 file in the HTML5 player (or to download it).  The other link lets the Firefox, Opera, and Chrome crowd watch the OGV file in situ (or to download it).

<script src=”__path to your media player__/swfobject.js” type=”text/javascript”></script>
<div id=”__this script id__” style=”margin: 3px; padding: 3px; text-align: center; float: left; width: 560px;”>
<font size=”3″ color=”#000100″ face=”verdana” style=”background-color:#FFFFFF”><b><strong>
PLAY <a href=”__path to your video image__.mp4″>Apple iTunes MP4</a> OR <a href=”__path to your video image__.ogv”>OPEN FORMAT VIDEO</strong></a>
</b></font></div>
<br clear=”all”>

<script type=”text/javascript”>// <![CDATA[
var sd = new SWFObject(‘__path to your media player__/mediaplayer.swf’,’mpl’,’560′,’402′,’8′);
sd.addParam(‘allowscriptaccess’,’always’);
sd.addParam(‘allowfullscreen’,’true’);
sd.addVariable(‘height’,’402′);
sd.addVariable(‘width’,’560′);
sd.addVariable(‘image’,’__path to your video poster image__.jpg.jpg’);
sd.addVariable(‘file’,’__path to your video image__.flv’);
sd.write(‘__this script id__’);
// ]]></script>

One can add a little extra wrinkle, and put those links over a fall back image.  This is done by making the image the background in a table.  In both cases, I highlight the links with a background color of white to assure legibility against potentially busy backgrounds.

<script src=”__path to your media player__/swfobject.js” type=”text/javascript”></script>
<div id=”__this script id__” style=”margin: 3px; padding: 3px; text-align: center; float: left; width: 560px;”>
<table cellpadding=”7″ cellspacing=”0″ border=”0″ background=”__path to your fallback image__.jpg” width=”560″ height=”402″>
<tr><td align=”center” valign=”bottom”>
<font size=”3″ color=”#000100″ face=”verdana” style=”background-color:#FFFFFF”><b><strong>
PLAY <a href=”__path to your video image__.mp4″>Apple iTunes MP4</a> OR <a href=”__path to your video image__.ogv”>OPEN FORMAT VIDEO</strong></a>
</b></font></td></tr></table></a></div>
<br clear=”all”>

<script type=”text/javascript”>// <![CDATA[
var sd = new SWFObject(‘__path to your media player__/mediaplayer.swf’,’mpl’,’560′,’402′,’8′);
sd.addParam(‘allowscriptaccess’,’always’);
sd.addParam(‘allowfullscreen’,’true’);
sd.addVariable(‘height’,’402′);
sd.addVariable(‘width’,’560′);
sd.addVariable(‘image’,’__path to your video poster image__.jpg.jpg’);
sd.addVariable(‘file’,’__path to your video image__.flv’);
sd.write(‘__this script id__’);
// ]]></script>

Now, pretty much anyone who isn’t using an old IE6 browser can have easy access to your videos either using the <video> tags or flash player first.  Of course, don’t forget that you could just stick the links under your embedded YouTube video, but then the non-flash crowd gets a missing plug-in message.  I haven’t really decided yet, but I think I’ll stick with flash first.   I’ll put my links over the fallback image so that everyone gets something pretty to see straight away, even if they’re going to have to add a click to see the video.