html5视频和回退到iframe无法正常工作

时间:2012-05-30 00:10:31

标签: jquery html5 video iframe

我正在使用HTML5自动播放视频,并使用vimeo进行后备。

<video width="100%" height="100%" autoplay="autoplay">
    <source src="video/mp4.mp4" type="video/mp4" />
    <source src="video/ogv.theora.ogv" type="video/ogg" />
    <iframe src="http://player.vimeo.com/video/43010500?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=1" width="100%" height="100%" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
</video>

这适用于Safari和Firefox,但Chrome上有回音。我拿出了vimeo iframe并且回声消失了,我的猜测是Chrome正在使用html5video并且iframe视频也隐藏在它下面。

如果浏览器无法播放html5视频,那么回退到iframe的最佳方法是什么。

感谢。

1 个答案:

答案 0 :(得分:2)

我建议您使用modernizr来检查是否支持html5视频。如果支持视频标记,则会注入视频标记,如果不支持则注入iframe。

http://modernizr.com/

<div id="videoplayer"></div>


if (Modernizr.video) {
  $('#videoplayer').html('all the video stuff you have'); // or build it and append
} else {
  $('#videoplayer').html('iframe code');
}

我不能不提及有一堆现有的插件和工具已经这样做了。

http://html5video.org/wiki/HTML5_Player_Comparison