chrome 的 html5 视频问题

Question

我想在我的网页上使用 html5 视频，代码如下:

<video id="vid" width="100%" autoplay loop>
  <source src="video/video.webm" type="video/webm">
  <source src="video/video.mp4" type="video/mp4">

Your browser does not support the video tag.
</video>

问题是，当我使用 webm 作为视频源时:

<source src="video/video.webm" type="video/webm">

它在 chrome 和 FF 上运行良好。但是一旦我添加 mp4 :

<source src="video/video.webm" type="video/webm">
      <source src="video/video.mp4" type="video/mp4">

Chrome 显示黑屏并显示“等待视频”字样，但 Safari 和 FF 按预期显示。

任何让它在所有这些浏览器上播放的建议都将不胜感激。谢谢。

Answer 1

这是我找到的适合我的情况的解决方案，

首先，将视频嵌入到您的 html 中:

<video id="videoId" width="100%" autoplay loop>
  <source src="main.webm" type="video/webm">
  <source src="main.mp4" type="video/mp4">

Your browser does not support the video tag.
</video>

然后检测浏览器是否为chrome:

var isChrome = !!window.chrome; 
var isIE = /*@cc_on!@*/false;

如果是 chrome，请将视频替换为 webm 版本。(对于那些自己没有遇到过问题的人:如果你同时嵌入 mp4 和 webm ，chrome 将不会播放它们中的任何一个，所以你必须只嵌入“webm”)

if( isChrome ) {
$("#videoId").replaceWith($('<video id="videoId" width="100%" autoplay loop><source src="video.webm" type="video/webm"></video>'));
}

对于 IE:在我的例子中，我用图像替换了 html5 视频:

if( isIE ) {
$("#videoId").replaceWith($('<img id="videoId" src="img/video.jpg" />'));
}