【问题标题】:html5 video issue with chromechrome的html5视频问题
【发布时间】:2013-05-22 08:35:36
【问题描述】:

我想在我的网页上使用 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 显示正常。

如果有任何建议让它在所有这些浏览器上播放,我们将不胜感激。 谢谢。

【问题讨论】:

标签: html google-chrome html5-video


【解决方案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" />'));
} 

【讨论】:

  • 对我没用。我还添加了 jQuery 库并将 CSS n HTML 粘贴到一个全新的文件中,Chrome 中仍然没有出现任何内容。
【解决方案2】:

我遇到了同样的问题,并且无法使用上面或其他线程中的任何建议解决方案来解决它(更新 Google 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>

上面的代码是对“适合所有人的视频”方法的改编。更多信息请访问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-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>
    

    我的在 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 秒下载一次。如果视频被下载,它将播放视频并停止间隔。

    【讨论】:

      猜你喜欢
      • 2012-11-18
      • 2015-04-03
      • 1970-01-01
      • 2013-09-03
      • 2017-06-28
      • 1970-01-01
      • 2016-07-21
      • 1970-01-01
      相关资源
      最近更新 更多