HTML5 视频，如果没有 .ogv 文件，则回退到 flash答案

【问题标题】：HTML5 video, fallback to flash if no .ogv fileHTML5 视频，如果没有 .ogv 文件，则回退到 flash
【发布时间】：2011-06-13 09:05:22
【问题描述】：

如果所需的文件类型不存在，我如何回退到 Flash 视频播放器。

例如这段代码：

<video controls width="500">
    <source src="<?= $mov ?>" type="video/mp4" />
    <embed src="http://blip.tv/play/gcMVgcmBAgA%2Em4v" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>

不包含 .ogv 文件，因此在 Firefox 中，会显示一个空的视频播放器。

即使浏览器支持 html5 视频标签，我如何才能退回到 Flash 播放器？

【问题讨论】：

躲猫猫！ Net.Tutsplus :)
@trufa：是的:)，在该页面上它指出：不幸的是，您不能轻易选择将 HTML 5 视频提供给 Firefox，而将 Flash 回退到 Safari。 Safari 理解
所以基本上答案是否定的，这做不到？
如果你想要一个只有 HTML 而没有 JavaScript 的解决方案，看起来 Firefox 不会降级为 Flash (stackoverflow.com/questions/6487690/…)。为避免视频播放器为空，您需要添加 OGG 或 WEBM 文件，以防 Firefox 未启用 MP4 支持。

标签： html html5-video

【解决方案1】：

以下是使用视频格式后备以及最终后备到 Flash 的完整示例：http://diveintohtml5.info/video.html#example

【讨论】：

【解决方案2】：

只需添加另一个源标签

<source src="fileName.ogv" type="video/ogv" />

它会起作用的......

【讨论】：

【解决方案3】：

你真的应该包括一个.ogv文件，这不是那么努力，有这么多视频转换器软件，你也可以找到在线转换器。

如果你不想这样做

使用Modernizr。

什么是 Modernizr？

Modernizr 向<html> 元素添加类，允许您在样式表中定位特定的浏览器功能。您实际上不需要编写任何 Javascript 即可使用它。

您是否曾经想在 CSS 中使用 if 语句来提供 border-radius 等很酷的功能？那么，使用 Modernizr 您可以做到这一点！语法也很直观：
.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}
Modernizr 是一个小型且简单的 JavaScript 库，可帮助您利用新兴的网络技术（CSS3、HTML 5），同时仍对可能尚不支持这些新技术的旧浏览器保持良好的控制水平。

Modernizr 使用功能检测来测试当前浏览器是否针对即将推出的功能（例如 rgba()、border-radius、CSS 过渡等）进行测试。这些目前正在跨浏览器实现，借助 Modernizr，您可以立即开始使用它们，并通过一种简单的方法来控制尚不支持它们的浏览器的回退。

此外，Modernizr 创建了一个自命名的全局 JavaScript 对象，其中包含每个特性的属性；如果浏览器支持它，该属性将评估true，如果不支持，它将评估false。

最后，Modernizr 还添加了对样式和打印 HTML5 元素的支持。这使您可以使用更多语义、前瞻性的元素，例如 <section>、<header> 和 <dialog>，而不必担心它们在 Internet Explorer 中不起作用。

Modernizr 不做的事情

Modernizr 确实不向浏览器添加缺少的功能；相反，它会检测功能的本机可用性，并为您提供一种方法来保持对您的网站的精细控制，而不管浏览器的功能如何。

但是，如果您对此感兴趣，您可能会想看看这里：HTML5 Cross browser Polyfills。

【讨论】：

【解决方案4】：

您可以使用 JavaScript 来检测它：

(function (video) {
    if (!video.canPlayType || !video.canPlayType('video/mp4')) {
        // Flash fallback
    }
}(document.createElement('video')));

【讨论】：