html5 视频和回退到 iframe 不起作用

Posted 2023-05-09

【中文标题】html5 视频和回退到 iframe 不起作用

【英文标题】：html5 video and fallback to an iframe not working

【发布时间】：2012-06-04 05:22:40

【问题描述】：

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

<video   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"   frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> 
</video>

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

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

谢谢。

【参考方案1】：

我建议您使用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

【讨论】：

谢谢，我从来没有用过modernizr。但这很完美。