HTML5 视频,如果没有 .ogv 文件,则回退到 Flash

发布于 2024-10-13 03:38:40 字数 476 浏览 8 评论 0原文

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

How can I fallback to a flash video player if the necessary file type is not present.

For example this code:

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

Does not include an .ogv file, so in Firefox, an empty video player is displayed.

How can I fall back to a Flash player even if the html5 video tag is supported in the browswer?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

银河中√捞星星 2024-10-20 03:38:40

您可以使用 JavaScript 来检测它:

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

You can use JavaScript to detect it:

(function (video) {
    if (!video.canPlayType || !video.canPlayType('video/mp4')) {
        // Flash fallback
    }
}(document.createElement('video')));
骷髅 2024-10-20 03:38:40

您确实应该包含一个 .ogv 文件,这并不费力,有很多视频转换器软件,而且您还可以找到在线转换器。


如果您不想这样做,

请使用 Modernizr

什么是 Modernizr?

Modernizr 将类添加到 元素中,允许您在样式表中定位特定的浏览器功能。您实际上不需要编写任何 Javascript 来使用它。

您是否曾经想过在 CSS 中执行 if 语句以获得诸如 border-radius 之类的炫酷功能?好吧,有了 Modernizr,您就可以实现这一目标!语法也非常直观:

.multiplebgs div p {
  /* 浏览器的属性
     支持多种背景*/
}
.no-multiplebgs div p {
  /* 可选的后备属性
     对于没有的浏览器 */
}

Modernizr 是一个小而简单的 JavaScript 库,可帮助您利用新兴的 Web 技术(CSS3、HTML 5),同时仍然对可能尚不支持这些新技术的旧版浏览器保持精细的控制。

Modernizr 使用功能检测来针对即将推出的功能(如 rgba()、边框半径、CSS 转换等)测试当前浏览器。这些目前正在跨浏览器实现,通过 Modernizr,您现在就可以开始使用它们,并通过一种简单的方法来控制尚不支持它们的浏览器的回退。

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

最后,Modernizr 还添加了对 HTML5 元素样式和打印的支持。这允许您使用更多语义、前瞻性的元素,例如

,而无需不必担心它们无法在 Internet Explorer 中运行。

Modernizr 不做什么

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

但是,如果您对此感兴趣,您可能需要查看此处:HTML5 跨浏览器 Polyfill

You should really include an .ogv file, that's not so much effort, there are so much video converter software, and you can also find online converters.


If you don't want to do that anyway

Use Modernizr.

What is Modernizr?

Modernizr adds classes to the <html> element which allow you to target specific browser functionality in your stylesheet. You don't actually need to write any Javascript to use it.

Have you ever wanted to do if-statements in your CSS for the availability of cool features like border-radius? Well, with Modernizr you can accomplish just that! The syntax is very intuitive, too:

.multiplebgs div p {
  /* properties for browsers that
     support multiple backgrounds */
}
.no-multiplebgs div p {
  /* optional fallback properties
     for browsers that don't */
}

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.

Additionally, Modernizr creates a self-titled global JavaScript object which contains properties for each feature; if a browser supports it, the property will evaluate true and if not, it will be false.

Lastly, Modernizr also adds support for styling and printing HTML5 elements. This allows you to use more semantic, forward-looking elements such as <section>, <header> and <dialog> without having to worry about them not working in Internet Explorer.

What Modernizr doesn't do

Modernizr does not add missing functionality to browsers; instead, it detects native availability of features and offers you a way to maintain a fine level of control over your site regardless of a browser’s capabilities.

However if you're interested in that, you'll probably want to look here: HTML5 Cross browser Polyfills.

泛滥成性 2024-10-20 03:38:40

只需添加另一个源标签

就可以了......

just add another source tag

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

it will work....

烧了回忆取暖 2024-10-20 03:38:40

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

Here is a complete example of using video format fallbacks with a final fallback to Flash: http://diveintohtml5.info/video.html#example

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文