chrome的html5视频问题
Posted
技术标签:
【中文标题】chrome的html5视频问题【英文标题】：html5 video issue with chrome 【发布时间】：2013-05-22 08:35:36 【问题描述】：我想在我的网页上使用 html5 视频，代码如下：
<video id="vid" 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 显示正常。
如果有任何建议让它在所有这些浏览器上播放，我们将不胜感激。 谢谢。
【问题讨论】：
我也有同样的问题，请看：***.com/questions/16937480/… 【参考方案1】：这是我发现的一个解决方案，适用于我的情况，
首先，将视频嵌入到您的 html 中：
<video id="videoId" 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" autoplay loop><source src="video.webm" type="video/webm"></video>'));
对于 IE： 就我而言，我用图片替换了 html5 视频：
if( isIE )
$("#videoId").replaceWith($('<img id="videoId" src="img/video.jpg" />'));
【讨论】：
对我没用。我还添加了 jQuery 库并将 CSS n HTML 粘贴到一个全新的文件中，Chrome 中仍然没有出现任何内容。【参考方案2】：我遇到了同样的问题，并且无法使用上面或其他线程中的任何建议解决方案来解决它（更新 Google Chrome 的版本或禁用 Chrome 的硬件加速也不起作用。）
最终为我解决的问题是将视频文件转换为不同的 mp4 格式。
事实证明，我已经使用 MP4 VIDEO 编码器转换了原始 mp4，而我应该使用 H.264 Normal 编码器进行转换。
这是完整的代码：
<video 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" 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" 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" />
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</video>
<p class="caption"><em>Ruby</em> (fragment), ICF Hastings 2013.</p>
上面的代码是对“适合所有人的视频”方法的改编。更多信息请访问http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/
我使用的是旧版本的 Wondershare Video Converter，但您可以通过免费在线服务（例如 http://video.online-convert.com/）完成相同的工作
【讨论】：
我和 Carme 一样。首先，我使用了一个 .mp4 文件，它就像一个魅力。然后我调整了它的大小，这个东西不再播放了。经过一些研究和一些尝试（我还没有找到这篇文章......）我尝试了 H.264 编码/容器，从那时起它就完美地工作了。我使用了 MPEG Streamclip。顺便说一句，这段代码足以满足我的目的：'' 对不起，我想把代码放在一个格式整齐的代码框中，但我不再被允许了。希望我的评论很清楚。【参考方案3】：确保您拥有 HTML5 文档类型：
<!DOCTYPE html>
这解决了我的问题。
【讨论】：
【参考方案4】：尝试交换两者，首先放置 mp4，然后放置 webm 代码，看看会发生什么。我有这个，
<div id="ModelVideo">
<video max- 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>
我的在 chrome 中运行良好，我的 mp4 就是这样，但无法在其他浏览器中进行测试，尽管我的 Dreamweaver 也在 Safari 中进行了测试，而且两者似乎都运行良好。
（别笑，还在努力website）
也许你可以告诉我如何成功控制音量，好像那个有问题。
【讨论】：
您好，感谢您的回答，我已经尝试过了，它并没有解决问题。至于音量，我没看懂你的意思？我检查了您的网站，没有视频/音频，只有标题和图片。【参考方案5】：Chrome 的问题是一旦下载视频就无法播放。
你可以通过添加一个小的javascript sn-p来解决它：
this.interval = setInterval(function()
this.countForVideo = document.getElementById('vid').readyState;
if(this.countForVideo == 4)
document.getElementById('vid').play();
clearInterval(this.interval);
,2000);
这将检查视频是否每 2 秒下载一次。如果视频被下载，它将播放视频并停止间隔。
【讨论】：
以上是关于chrome的html5视频问题的主要内容，如果未能解决你的问题，请参考以下文章
Chrome 中的 HTML5 视频 currentTime 重绘问题