HTML5 Video - If Files Do Not Exist, Revert To SWF Fall Back

I am using the following code and wanted some advice on this approach. We are optimizing our site for iPad, tablet, mac, iPhone and mobile such as Android. I decided that the best

Solution 1:

I would suggest using a library such as MediaElementJS which will handle all this for you.

Solution 2:

This is the solution we have gone with. Cross browser and Cross device compliant.

We did not want to use an external library, although mediaelementsjs and the others out their are good alternatives, this is the best solution for us.

1 - Check the user has Flash, if they do, play the SWF version of the video

2 - If the user has no Flash, check if they have HTML5 enabled.

3 - If they have HTML5, play the mp4 first (must supported browser playback)

4 - If they have HTML5 but on Firefox or a phone, example play the .ogv

5 - Lastly play the webm failing all the above

6 - If they have none of these features, we simply include a blank div. This triggers the video play button on the site not to show the video feature at all.

No PHP, a litte jQuery and the rest is valid HTML5. This is the best solution we found as it works on all devices including the iPad. We also have an IF CONDITIONAL for older Internet Explorer drawback - this too has helpled for IE playback.

The results we have seen are excellent, the file works on every customer device and browser we have for our demographic. We use GetClicky and they have an API, adding <video title="video name" gives the HTML5 and SWF playback trackable.

<div class="videobox showorhide" id="videoisonbox">
<object width="294" height="530" align="middle" id="product2a" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000">
        <param value="http://cdn.com/718_blacklep/718_blacklep.swf" name="movie">
        <param value="best" name="quality">
        <param value="#ffffff" name="bgcolor">
        <param value="true" name="play">
        <param value="true" name="loop">
        <param value="transparent" name="wmode">
        <param value="showall" name="scale">
        <param value="true" name="menu">
        <param value="false" name="devicefont">
        <param value="" name="salign">
        <param value="sameDomain" name="allowScriptAccess">
        <!--[if !IE]>-->
        <object width="294" height="530" data="http://cdn.com/718_blacklep/718_blacklep.swf" type="application/x-shockwave-flash">
                <param value="http://cdn.com/718_blacklep/718_blacklep.swf" name="movie">
                <param value="best" name="quality">
                <param value="#ffffff" name="bgcolor">
                <param value="true" name="play">
                <param value="true" name="loop">
                <param value="transparent" name="wmode">
                <param value="showall" name="scale">
                <param value="true" name="menu">
                <param value="false" name="devicefont">
                <param value="" name="salign">
                <param value="sameDomain" name="allowScriptAccess">
                <!--<![endif]-->
                <video title="718 Black Lep Dress" width="294" height="530" loop preload="false" autoplay id="GCFlashAlt" controls tabindex="0">
                        <source type="video/mp4" src="http://cdn.com/718_blacklep/718_blacklep.mp4"></source>
                        <source type="video/ogg" src="http://cdn.com/718_blacklep/718_blacklep.ogv"></source>
                        <source type="video/webm" src="http://cdn.com/718_blacklep/718_blacklep.webm"></source>
                </video>
                <div class="blank" class="enabled disable detect" id="isvideooncheck"><!-- jQuery Update for disabling video --></div>
                <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
</object>
</div>

Solution 3:

The check for whether the HTML5 video files exist should be made on the server side. For example if you are using PHP on the server you could use something like this:

<?php if (file_exists($html5videofile)) { ?>
    <video ...>
        <source ...>
        <source ...>
        <source ...>
        <object ...>
    </video>
<?php } else { ?>
    <object ...>
<?php } ?>