Question

在设计我的网站时，我尝试使用HTML5视频标记。该视频在大多数浏览器中使用HTML5，如果没有，则使用我在代码中包含的闪回后备。主要代码如下：

<video controls autoplay preload="auto" width="640" height="360">
<source src="http://incisionindustries.com/clients/luminal/gictg/wp-content/themes/Karma/images/_global/video.mp4" type="video/mp4">
<source src="http://incisionindustries.com/clients/luminal/gictg/wp-content/themes/Karma/images/_global/video.ogv" type="video/ogg">
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[{'url':'http%3A%2F%2Fincisionindustries.com%2Fclients%2Fluminal%2Fgictg%2Fwp-content%2Fthemes%2FKarma%2Fimages%2F_global%2Fvideo.mp4','autoPlay':true}]}" />
</object>
</video>

现在唯一仍然无法使用的浏览器是IE9。 IE9看到HTML5视频命令并加载播放器一瞬间但从未加载视频。所以我试图做的是按如下方式设置：

<!--[if IE]>
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[{'url':'http%3A%2F%2Fincisionindustries.com%2Fclients%2Fluminal%2Fgictg%2Fwp-content%2Fthemes%2FKarma%2Fimages%2F_global%2Fvideo.mp4','autoPlay':true}]}" />
</object>
<![endif]-->
<![if !IE]>
<video controls autoplay preload="auto" width="640" height="360">
<source src="http://incisionindustries.com/clients/luminal/gictg/wp-content/themes/Karma/images/_global/video.mp4" type="video/mp4">
<source src="http://incisionindustries.com/clients/luminal/gictg/wp-content/themes/Karma/images/_global/video.ogv" type="video/ogg">
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':[{'url':'http%3A%2F%2Fincisionindustries.com%2Fclients%2Fluminal%2Fgictg%2Fwp-content%2Fthemes%2FKarma%2Fimages%2F_global%2Fvideo.mp4','autoPlay':true}]}" />
</object>
</video>
<![endif]>

然而，加载此代码后，除IE9外，所有其他浏览器都会再次运行。它没有拿起if IE标签，而是直接进入不加载的HTML 5页面。

我想要做的就是说，如果它是任何版本的IE使用基于闪存的播放器，如果是其他任何使用HTML5与闪回后退。如果有人能够提供一些关于如何使这项工作或更优雅的解决方案，我们将非常感激。

谢谢

Answer 1

尝试类似的事情：

<!--[if lt IE 10]>
// here
<![endif]-->

Answer 2

您应该使用 modernizr 之类的内容来检查您的浏览器功能（而不是浏览器嗅探和做出假设 - 它们可能是错误的或更改的）。根据客户端的功能，您可以开始提供正确的内容。

另一种方法（如果只是纯视频而你不需要任何其他功能检测）将使用 Video for Everybody 所示的内容。

这是他们建议为每个人嵌入视频的代码：

<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and autoplay likewise -->
<!-- warning: playback does not work on iOS3 if you include the poster attribute! fixed in iOS4.0 -->
<video width="640" height="360" controls>
    <!-- MP4 must be first for iPad! -->
    <source src="__VIDEO__.MP4" type="video/mp4" /><!-- Safari / iOS video    -->
    <source src="__VIDEO__.OGV" type="video/ogg" /><!-- Firefox / Opera / Chrome10 -->
    <!-- fallback to Flash: -->
    <object width="640" height="360" type="application/x-shockwave-flash" data="__FLASH__.SWF">
        <!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
        <param name="movie" value="__FLASH__.SWF" />
        <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
        <!-- fallback image. note the title field below, put the title of the video there -->
        <img src="__VIDEO__.JPG" width="640" height="360" alt="__TITLE__"
             title="No video playback capabilities, please download the video below" />
    </object>
</video>
<!-- you *must* offer a download link as they may be able to play the file locally. customise this bit all you want -->
<p> <strong>Download Video:</strong>
    Closed Format:  <a href="__VIDEO__.MP4">"MP4"</a>
    Open Format:    <a href="__VIDEO__.OGV">"Ogg"</a>
</p>

加载内容如果是IE或不是IE

2 个答案: