Question

我正在使用以下代码，并希望就此方法提供一些建议。我们正在针对iPad，平板电脑，Mac，iPhone和移动设备（如Android）优化我们的网站。

我认为最好的方法是首先执行HTML5，如果HTML5不存在则再回到Flash。但是它无法正常工作。例如，如果所有HTML5视频都不存在，则会显示mime错误而不会回退到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>

Answer 1

我建议使用像MediaElementJS这样的库来处理所有这些。

Answer 2

这是我们采用的解决方案。跨浏览器和Cross设备兼容。

我们不想使用外部库，虽然mediaelementsjs和其他人都是很好的选择，但这对我们来说是最好的解决方案。

1 - 检查用户是否有Flash，如果有，请播放视频的SWF版本

2 - 如果用户没有Flash，请检查他们是否启用了HTML5。

3 - 如果他们有HTML5，请先播放mp4（必须支持浏览器播放）

4 - 如果他们有HTML5但在Firefox或手机上，例如播放.ogv

5 - 最后播放webm失败以上所有

6 - 如果他们没有这些功能，我们只需要一个空白div。这会触发网站上的视频播放按钮，根本不显示视频功能。

没有PHP，一个小小的jQuery，其余的是有效的HTML5。这是我们发现的最佳解决方案，因为它适用于包括iPad在内的所有设备。我们还有一个IF CONDITIONAL用于较旧的Internet Explorer缺陷 - 这也有助于IE播放。

我们看到的结果非常好，该文件适用于我们针对我们的人口统计的每个客户设备和浏览器。我们使用GetClicky并且他们有一个API，添加<video title="video name"可以跟踪HTML5和SWF播放。

<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>

Answer 3

检查HTML5视频文件是否存在应该在服务器端进行。例如，如果您在服务器上使用PHP，则可以使用以下内容：

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

HTML5视频 - 如果文件不存在，则还原为SWF后退

3 个答案: