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 按预期显示。

任何让它在所有这些浏览器上播放的建议都将不胜感激。谢谢。

4

5 回答 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" />'));
}
于 2013-06-05T18:53:19.083 回答
4

我遇到了同样的问题，并且无法使用任何建议的解决方案来解决它，无论是在上面还是在其他线程中（更新 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/ ）完成相同的工作

于 2013-12-10T14:42:16.840 回答
3

确保你有 HTML5 文档类型：

<!DOCTYPE html>

这解决了我的问题。

于 2013-10-31T14:10:39.033 回答
2

尝试交换两者，将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 中进行了测试，而且两者似乎都运行良好。

（别笑，还在网站上工作）

也许你可以让我知道如何成功控制音量，好像那个有问题。

于 2013-05-27T16:36:36.157 回答
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 秒下载一次。如果下载了视频，它将播放视频并停止间隔。

于 2018-12-06T10:32:56.577 回答