Question

如果不存在必要的文件类型，如何回退到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播放器？

Answer 1

您可以使用JavaScript来检测它：

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

Answer 2

你应该真的包含一个.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库，可帮助您利用新兴的Web技术（CSS3，HTML 5），同时仍然保持对可能尚不支持这些新技术的旧浏览器的良好控制。

Modernizr使用特征检测来测试当前浏览器与即将推出的功能，如rgba（），border-radius，CSS Transitions等等。这些目前正在跨浏览器实现，而现在，您可以使用Modernizr开始使用它们，并可以通过简单的方法来控制尚不支持它们的浏览器的回退。

此外，Modernizr创建了一个自我标题的全局JavaScript对象，其中包含每个功能的属性;如果浏览器支持，则该属性将评估true，如果不支持，则为false。

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

Modernizr不做什么

Modernizr 不为浏览器添加缺少的功能;相反，它会检测功能的原生可用性，并为您提供一种方法，无论浏览器的功能如何，都能保持对您网站的精细控制。

但是，如果您对此感兴趣，可能需要查看此处：HTML5 Cross browser Polyfills。

Answer 3

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

Answer 4

只需添加其他源标记

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

它会起作用....

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

4 个答案:

如果您不想这样做

什么是Modernizr？

Modernizr不做什么