Html chrome 的 html5 视频问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16773986/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html5 video issue with chrome
提问by Ramtin Gh
I'd like to use a html5 video on my web page, here is the code:
我想在我的网页上使用 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>
The problem is that, when I use webm as video source:
问题是，当我使用 webm 作为视频源时：
<source src="video/video.webm" type="video/webm">
it works fine on chrome and FF. But as soon as I add mp4 :
它在 chrome 和 FF 上运行良好。但是一旦我添加 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.
Chrome 显示黑屏并在其上显示“等待视频”字样，但 safari 和 FF 按预期显示。
Any suggestions to make it play on all these browsers would be appreciated. Thanks.
任何让它在所有这些浏览器上播放的建议将不胜感激。谢谢。
采纳答案by Ramtin Gh
This is a solution I found That worked for my case,
这是我发现的一个解决方案，适用于我的情况，
First, embed the video in your html:
首先，将视频嵌入到您的 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:
然后检测浏览器是否为 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)
如果是 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>'));
}
And as for IE: In my case I replaced the html5 video with an image:
至于 IE：在我的情况下，我用图像替换了 html5 视频：
if( isIE ) {
$("#videoId").replaceWith($('<img id="videoId" src="img/video.jpg" />'));
}
回答by Carme
I had the same problem and couldn't solve it with any of the proposed solutions, either above or in other threads (updating Google Chrome's version or disabling Chrome's hardware acceleration didn't work either.)
我遇到了同样的问题，无法使用上面或其他线程中的任何建议的解决方案解决它（更新 Google Chrome 的版本或禁用 Chrome 的硬件加速也不起作用。）
In the end what has solved it for me has been converting the video file to a different mp4 format.
最后，为我解决的问题是将视频文件转换为不同的 mp4 格式。
It turned out that I had converted the original mp4 with an MP4 VIDEO encoder, when I should have done so with an H.264 Normal encoder.
结果是我用 MP4 VIDEO 编码器转换了原始 mp4，而我应该用 H.264 Normal 编码器这样做。
Here's the full code:
这是完整的代码：
<video width="320" height="240" controls>
<source src="video/Ruby.ogv" type="video/ogg" />
<source src="video/Ruby.webm" type="video/webm" />
<source src="video/Ruby-iPad.mp4" type="video/mp4" />
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="320" height="240" id="Ruby" align="middle">
<param name="movie" value="video/Ruby.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="play" value="false" />
<param name="loop" value="false" />
<param name="menu" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="video/Ruby.swf" width="330" height="295" id="Ruby">
<param name="movie" value="video/Ruby.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#cccccc" />
<param name="play" value="false" />
<param name="loop" value="false" />
<param name="menu" value="true" />
<!--<![endif]-->
<img src="video/Ruby.jpg" alt="No video playback capabilities" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</video>
<p class="caption"><em>Ruby</em> (fragment), ICF Hastings 2013.</p>
The code above is an adaptation of the "Video For Everybody" method. You'll find more info at http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/
上面的代码是对“人人视频”方法的改编。您可以在http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/找到更多信息
I use an old version of Wondershare Video Converter but you can do the same job from free online services such as http://video.online-convert.com/
我使用的是旧版本的 Wondershare Video Converter，但您可以通过免费的在线服务（例如http://video.online-convert.com/）完成相同的工作
回答by Miki
Make sure that yout have HTML5 doctype:
确保你有 HTML5 文档类型：
<!DOCTYPE html>
This fixed the problem for me.
这为我解决了问题。
回答by Bat Sheva Sida
Try swapping the two, put mp4first and the webmcode second, and see what happens. I have this,
尝试更换两个，放MP4第一和WEBM码第二，看看会发生什么。我有这个，
<div id="ModelVideo">
<video max-width="100%" controls autoplay muted>
<source src="movie1.mp4" type="video/mp4">
<source src="movie1.webm" type="video/webm" controls>
Your browser does not support the video tag.
</video>
</div>
and mine is working fine in chrome, my mp4 that is, but cant test in the other browsers, although my Dreamweaver tests in Safari as well, and both seem to work fine.
我的在 chrome 中工作正常，我的 mp4 就是这样，但无法在其他浏览器中进行测试，尽管我的 Dreamweaver 也在 Safari 中进行了测试，而且两者似乎都可以正常工作。
(don't laugh, still working on the website)
（别笑，还在做网站）
Perhaps you can let me know how I can successfully control the volume, seem to have trouble with that one.
也许你可以让我知道我如何成功控制音量，似乎有问题。
回答by Pavan Gadagi
Problem with Chrome is that once it downloads the video it does not play it.
Chrome 的问题在于，一旦下载视频，它就不会播放。
YOu can solve it by adding a small javascript snippet :
您可以通过添加一个小的 javascript 片段来解决它：
this.interval = setInterval(function(){
this.countForVideo = document.getElementById('vid').readyState;
if(this.countForVideo == 4){
document.getElementById('vid').play();
clearInterval(this.interval);
}
},2000);
This will check if the video is downloaded every 2 sec. If the video is downloaded, it will play the video and stop the interval.
这将检查视频是否每 2 秒下载一次。如果视频已下载，它将播放视频并停止间隔。
