首页 文章

Chrome的html5视频问题

提问于
浏览 次
8

我想在我的网页上使用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按预期显示 .

任何建议，使其在所有这些浏览器上播放将不胜感激 . 谢谢 .

html5 google-chrome html5-video

5 回答

  • 6

    这是我发现的解决方案对我的情况有效，

    首先，将视频嵌入你的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" />'));
}
    回复于
  • 2

    我遇到了同样的问题，并且无法解决上述任何提议的解决方案，无论是在上面还是在其他线程中（更新谷歌Chrome的版本或禁用Chrome的硬件加速也无效 . ）

    最后解决它的是将视频文件转换为不同的mp4格式 .

    原来我用MP4 VIDEO编码器转换了原来的mp4，我应该用H.264 Normal编码器完成 .

    这是完整的代码：

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

    上面的代码是"Video For Everybody"方法的改编 . 你会在http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/找到更多信息

    我使用旧版本的Wondershare Video Converter，但您可以通过免费在线服务（例如http://video.online-convert.com/）完成同样的工作 .

    回复于
  • 3

    确保您拥有HTML5 doctype：

    <!DOCTYPE html>

    这解决了我的问题 .

    回复于
  • 4

    尝试交换两个，先放 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>

    虽然我的Dreamweaver也在Safari中测试，但我的mp4在其他浏览器中无法测试，并且我的mp4工作正常，但两者似乎都能正常工作 .

    （不要笑，还在努力website）

    也许你可以告诉我如何成功控制音量，似乎有问题 .

    回复于
  • 0

    Chrome的问题在于，一旦下载视频，它就无法播放 .

    你可以通过添加一个小的javascript片段来解决它：

    this.interval = setInterval(function(){
  this.countForVideo = document.getElementById('vid').readyState;
  if(this.countForVideo == 4){
    document.getElementById('vid').play();
    clearInterval(this.interval);
  }
},2000);

    这将检查视频是否每2秒下载一次 . 如果下载视频，它将播放视频并停止间隔 .

    回复于

相关问题