设置 HTML5 视频在 FF 或 Safari 中不起作用答案

【问题标题】：Setting up HTML5 videos not working in FF or Safari设置 HTML5 视频在 FF 或 Safari 中不起作用
【发布时间】：2013-02-26 09:21:34
【问题描述】：

在 www.graysonearle.com/bluemen/index2.html 上制作这个有趣的网络项目，我遇到了各种各样的问题。 SO上的某个人帮助我确保在播放之前加载了视频，但这个解决方案只适用于我的Chrome。代码如下：

    for (var i=0;i<16;i++) {
        document.write('<div class="vidBox" id="box'+i+'">');
        document.write('    <video class="vid" loop="loop" preload="metadata" id="vid'+i+'">');
        document.write('    <\/video>');
        document.write('<\/div>');
    }


var xhr = new XMLHttpRequest();
xhr.open('GET', 'videos/fullvid' + ext, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  if (this.status == 200) {
    console.log("got it");
    var myBlob = this.response;
    var vid = (window.webkitURL ? webkitURL : URL).createObjectURL(myBlob);
    // myBlob is now the blob that the object URL pointed to.
       for (var i=0;i<16;i++) {
        display(i,vid)
   }
  }
};
xhr.send();

       function display(i,vid){

    var video = document.getElementById("vid"+i);
    console.log(video);
    video.src = vid;

}

编辑：澄清一下，我希望加载这个 4x4 网格的视频（我稍后可能会添加一个加载屏幕）而不必自动播放。加载后，单击 PLAY ALL 应该使它们同时播放。单击 FISH 会在电影网格中生成一个图案。

【问题讨论】：

标签： jquery html video html5-video

【解决方案1】：

我不确定您为什么使用 document.write 添加这些，但无论如何尝试将自动播放属性添加到视频中...

<video controls="controls" autoplay="autoplay">
  Your browser does not support the video tag.
</video>

【讨论】：

【解决方案2】：

除了将视频添加到 HTML 的“有趣”方式之外，您还应该依赖 HTML5 media events。

首先，如果您希望视频真正自动加载，请不要使用preload="metadata"，因为这只会加载视频元数据。将 preload 设置为 "auto" 应该会有所帮助。或者，您可以完全忽略它，因为 auto 是默认值。（尽管似乎每当 Opera 添加对该属性的支持时，他们可能会将其默认设置为 "metadata"，因此您最好将其明确设置为 "auto"。）

在那之后，摆脱整个 XHR 混乱。然后，您可以执行以下操作：

var videos = document.getElementsByTagName('video');

for(var i = 0, ii = videos.length; i < ii; i++) {
  videos[i].addEventListener('canplaythrough',enablePlayback,false);
}

var videosLoaded = 0;

function enablePlayback(e) {
  videosLoaded++;
  if(videosLoaded === 16) {
    // enable a play button or do whatever you want
    // in this case: start playing all the videos at once
    for(var i = 0, ii = videos.length; i < ii; i++) {
      videos[i].play();
    }
  }
}

这段代码基本上为所有视频添加了canplaythrough 事件的侦听器，然后当每个视频触发它时，它们会将videosLoaded 变量加一，当最后一个视频调用它时，@987654331 @ hits 16（4x4 网格中的视频数量），它将在所有视频对象上调用 play()。

您可能需要对此进行大量试验才能使其正确（我自己手头没有 16 个小而短的视频来充分测试这一点），但这应该会带您走向正确的方向.如果preload="auto" 没有下载所有视频（可能会发生，因为它们太多了），您可能还想查看video.load()。

如果video.load() 和preload="auto" 似乎都不起作用，您可以将所有视频设置为自动播放，然后侦听play 事件并立即暂停它们（然后删除play 事件侦听器） .之后，canplaythrough 的代码与之前相同。

【讨论】：

非常感谢您抽出宝贵时间。我已经遇到的一个问题是浏览器在加载 8~ 个视频后就会放弃。这是 XHR 的最初原因，但也许有更好的出路。在 Chrome 上查看graysonearle.com/bluemen/index3.html
哦等等。重新加载页面几次后，它可以工作。也许这种联系很糟糕......让我知道它是否适合你。再次感谢。

【解决方案3】：

我可以看看你的文档类型吗？请注意，html5 的 doctype 与早期版本的 html 不同。检查您的文档类型。应该是<!DOCTYPE HTML> Only。

编辑 html5 视频的正确标签。我认为您可能需要修改语法。

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

还要注意您的视频编解码器：

MP4 = 具有 H264 视频编解码器和 AAC 音频编解码器的 MPEG 4 文件

WebM = 带有 VP8 视频编解码器和 Vorbis 音频编解码器的 WebM 文件

Ogg = 带有 Theora 视频编解码器和 Vorbis 音频编解码器的 Ogg 文件

以下是某些浏览器播放视频可能需要的其他内容：

videoTag.src = "vid";
videoTag.load();
videoTag.play();

【讨论】：

呃哦，设置为我会改变它....没有改变。不过谢谢！
您的语法或浏览器版本应该是罪魁祸首。你试过用纯 html 测试代码（没有 ajax 和 javascript）。只需尝试使用 html5 在您的网页上播放视频，看看浏览器如何响应。我成功地播放了我的 html5 视频，但它们都更新到了最新版本。尽可能多地在 chrome 上工作。它必须与浏览器有关，而不是您的代码。
当我有 16 个视频等待同时播放时，这是一种处理浏览器播放效果不佳这一事实的非常精细的方法。
这会返回什么？控制台日志（视频）；在此处运行浏览器测试：w3schools.com/html/html5_video.asp
试试这个：videoTag.src = "vid"; videoTag.load(); videoTag.play(); 代替