Question

在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会在电影网格中生成一个模式。

Answer 1

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

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

Answer 2

我能看到你的doctype吗？请注意，html5的doctype与早期版本的html不同。检查您的Doctype。它应该只有<!DOCTYPE HTML>。

EDIT 适用于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();

Answer 3

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

首先，如果您希望视频实际自动加载，请不要使用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();
    }
  }
}

此代码基本上为所有视频添加了{{1}}事件的监听器，然后当每个视频触发它时，它们会将canplaythrough变量递增1，并在最后一个视频调用它时以及videosLoaded点击16（4x4网格中的视频数量），它会在所有视频对象上调用videosLoaded。

您可能需要对此进行相当多的尝试以使其正确（我自己手边没有16个小视频和短视频来充分测试），但这应该会带您走向正确的方向。如果play()没有下载所有视频（可能会发生，因为有太多这样的视频），您可能还需要查看video.load()。

如果preload="auto"和video.load()似乎都无法解决问题，您可以将所有视频设置为自动播放，然后收听preload="auto"事件并立即暂停（然后删除play事件监听器）。之后，为play提供与以前相同的代码。

设置不在FF或Safari中运行的HTML5视频

3 个答案: