html5视频问题与铬 [英] html5 video issue with chrome

问题描述

我想在我的网页上使用html5视频，这里是代码：

 < video id =vidwidth =100％autoplay loop> 
< source src =video / video.webmtype =video / webm> 
< source src =video / video.mp4type =video / mp4> 
 
您的浏览器不支持视频标签。 
< / video> 
  

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

 < source src =video / video.webmtype =video / webm> 
  

它可以在Chrome和FF上正常工作。
但是只要我加入mp4：

 < source src =video / video.webmtype = 视频/ WEBM > 
< source src =video / video.mp4type =video / mp4> 
  

Chrome会显示黑屏和文字等待视频，但safari和FF显示它如预期的那样。

任何建议使它可以在所有这些浏览器上播放，我们将不胜感激。
Thanks。

解决方案

这是我找到的解决方案，适用于我的案例，

首先，将视频嵌入到您的html中： b
$ b

 < video id =videoIdwidth =100％自动播放循环> 
< source src =main.webmtype =video / webm> 
< source src =main.mp4type =video / mp4> 
 
您的浏览器不支持视频标签。 
< / video> 
  

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

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

如果使用chrome，请用webm版本替换视频。
（对于那些自己没有遇到问题的人：
，如果你嵌入mp4和webm，chr​​ome将不会播放它们，所以你只需要嵌入webm）

  if（isChrome）{
 $（＃videoId）。replaceWith（$（'< video id =videoId width =100％autoplay loop>< source src =video.webmtype =video / webm>< / video>'））; 
} 
  

至于IE：
在我的情况下，我将html5带有图片的视频：

  if（isIE）{
 $（＃videoId）。replaceWith（$（ '< img id =videoIdsrc =img / video.jpg/>'））; 
} 
  

I'd like to use a html5 video on my web page, here is the code:

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

The problem is that, when I use webm as video source:

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

it works fine on chrome and FF. But as soon as I add mp4 :

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

Chrome shows a black screen and the text "waiting for video" on it, But safari and FF show it as expected.

Any suggestions to make it play on all these browsers would be appreciated. Thanks.

解决方案

This is a solution I found That worked for my case,

First, embed the video in your 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>

Then detect if the Browser is chrome:

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

If its chrome, replace the video with webm version. (For those who haven't faced the problem themselves: if you embed both mp4 and webm , chrome will not play any of them, so you have to embed "webm" only)

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

And as for IE: In my case I replaced the html5 video with an image:

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

这篇关于html5视频问题与铬的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！