6

I'm trying to figure out my options when it comes to playing both audio and video via the web. I'm sold on the HTML 5 <video /> and <audio />. But, I'd like to be able to display flash video/audio if the HTML video/audio fails.

Is there an easy way to detect if the video/audio is not playing for any reason, then swap out the HTML5 player for a Flash player?

4

4 回答 4

4

您可以将 Flash 替代项作为<video>标签中的最后一项弹出，如果 HTML5 视频没有，它将播放。

请参阅 Mark Pilgrim 的示例，因为它全面且定期更新：http ://diveintohtml5.ep.io/video.html#example

总结一下：

<video>
    <!-- HTML5 video -->
    <source src="video.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
    <source src="video.mp4">

    <!-- Flash player fallback for user agents that don’t support HTML5 video -->
    <!-- All user agents that don’t understand the <video> tag, or don’t support
     the video formats you’ve provided, will show this instead. Even IE 6. -->
    <object width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf"> 
        <param name="movie" value="flowplayer-3.2.1.swf">
        <param name="flashvars" value='config={"clip": {"url": "video.mp4", "autoPlay":false, "autoBuffering":true}}'>
    </object>
</video>
于 2011-03-04T17:04:23.270 回答
3

如果您可以自由选择 Flash 视频播放器，请尝试 JWPlayer，它实现了 HTML5/Flash 后备

于 2011-03-04T18:25:56.167 回答
2

我推荐MediaElementJS。

但要回答您的问题，视频、音频和源元素的本质允许您向浏览器呈现不同的源，然后浏览器选择可以播放的内容。如果它不能播放其中任何一个，只要您提供 Flash 替代品，它就会继续使用它。

于 2011-03-04T19:58:57.187 回答
1

您可以使用Modernizr检查是否支持特定的 HTML5 标签，如果不支持则切换到故障安全选项，例如：

if (Modernizr.video) {
    //start using HTML5's video tag
} else {
    // use flash
}

这是一个关于如何使用 Modernizr部署 HTML5 和 CSS3 w/ Modernizr的教程

于 2011-03-04T16:39:00.860 回答