1

我正在使用以下代码，并希望获得有关此方法的一些建议。我们正在针对 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>
4

3 回答 3

2

我建议使用MediaElementJS之类的库来为您处理所有这些。

于 2012-12-12T15:15:35.577 回答
0

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

我们不想使用外部库，尽管 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>
于 2012-12-17T09:02:22.497 回答
-1

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

<?php if (file_exists($html5videofile)) { ?>
    <video ...>
        <source ...>
        <source ...>
        <source ...>
        <object ...>
    </video>
<?php } else { ?>
    <object ...>
<?php } ?>
于 2012-12-12T19:55:34.193 回答