1

在 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 在电影网格中创建一个图案。

4

3 回答 3

0

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

<video controls="controls" autoplay="autoplay">
  Your browser does not support the video tag.
</video>
于 2013-02-25T23:24:10.230 回答
0

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

编辑 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();
于 2013-02-25T23:24:45.703 回答
0

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

首先，如果您希望视频实际自动加载，请不要使用preload="metadata"，因为它只会加载视频元数据。将预加载设置为"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变量加一，当最后一个视频调用它并且videosLoaded点击数为 16（4x4 网格中的视频数)，它将调用play()所有视频对象。

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

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

于 2013-02-26T01:07:32.667 回答