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 approach is to do HTML5 first, if HTML5 does not exist then fall back to Flash. However it won’t work properly. For example, if all the HTML5 videos do not exist it shows the mime error and not fall back to Flash?
<video width="294" height="530" loop="" preload="false" autoplay="" id="GCFlashAlt" controls="controls" tabindex="0">
<source type="video/webm" src="http://cdn.com/718_blacklep/718_blacklep.webm"></source>
<source type="video/ogg" src="http://cdn.com/718_blacklep/718_blacklep.ogv"></source>
<source type="video/mp4" src="http://cdn.com/718_blacklep/718_blacklep.mp4"></source>
<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]-->
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</video>
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
.ogv5 – 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 CONDITIONALfor 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.