Question

是否可以在Chrome（和Opera）中完全缓冲HTML5视频？

我在亚马逊S3上以.mp4和.webm主持电影。在HTML中，我使用标准<video>标记。服务器响应状态为206 Partial Content。这很棒，因为它允许浏览器下载视频的任何部分，但我需要能够立即搜索文件的任何部分。

我试过了：

.PROGRESS事件。当Chrome停止缓冲第一部分时，连接将被终止。下一部分是以新连接方式下载的，因此JavaScript无法继续检查下载的总数据。即使可能，旧数据也不会存储在缓存中。此方法适用于Firefox和Safari。哎呀，即使在IE10中！
XHRS。我可以完全下载电影，但是当视频开始播放时，Chrome会尝试再次从服务器下载电影。我甚至试图将这部电影传递给base64中的HTML，但那是很多数据
FileAPI。 Chrome无法创建足够大的BLOB并崩溃。

欢迎任何帮助！

PS。我知道od和类似的问题，但我希望自从他们被问到以后发生了一些变化。

Answer 1

由于S3支持部分下载，因此Chrome最初会在播放头前缓冲“仅需要的内容”，然后停止缓冲。当视频开始播放时，它将继续“仅需要”。这意味着根据用户的下载速度，它会立即停止缓冲，因为它有足够的缓冲区可以连续播放。

但如果您在玩完视频后暂停视频，则Chrome将不停止缓存并一直到最后。

此示例利用该技术在屏幕上显示视频之前完全缓冲视频。

在Chrome 32上测试

// Create video in background and start playing
var video = document.createElement('video');
video.src = 'video.mp4';
video.controls = true;
video.muted = true; 
video.play();

// Pause immediately after it starts playing.
video.addEventListener("timeupdate", function() {
    if (this.currentTime > 0) {

        this.pause();
        video.muted = false;
        video.currentTime = 0
        this.removeEventListener("timeupdate", arguments.callee, false);

        // When whole video is buffered, show video on page
        video.addEventListener("progress", function() {
            if (Math.round(video.buffered.end(0)) / Math.round(video.seekable.end(0)) == 1) {
                document.body.appendChild(video);
                this.removeEventListener("progress", arguments.callee, false);
            }
        }, false);
    }
}, false);

Answer 2

您是否尝试过canplaythrough活动？

不是传统意义上的，我的意思是。而是以'hacky'的方式。当浏览器检测到有足够的视频缓冲连续播放而不暂停时，会触发canplaythrough。我猜这个事件与chrome暂停缓冲的同时触发。如果是这种情况，则可以用它来触发视频其余部分的请求。

Answer 3

有几种方法可以一直加载视频然后播放它：
1.有一个好东西浏览器开发者会自豪的方式：

var video = document.createElement('video');
video.src='myvideo.mp4';
document.appendChild(video);
video.load();
video.addEventListener('loadedmeta',function(){
video.play()
});

2。还有懒惰的“但是，我会得到心皮隧道！”开发方式：

<video src='myvideo.mp4' onloadedmeta='this.play()' preload></video>

来源：
http://www.w3schools.com/tags/tag_video.asp
how to run js code when video is fully buffered/loaded
How do I add new Video entirely from JavaScript?
javascript with html <video> load() & play() function not firing http://www.w3.org/wiki/HTML/Elements/video

Answer 4

我没有尝试过，但HTML5视频对象包含缓冲属性

var video = document.createElement('video');
video.buffered.start(0);
video.buffered.end(0);

您可以尝试监控缓冲（例如使用此线程chrome html5 video buffered.end event）

然后使用

连续将当前时间更改为缓冲时间之前的时间

video.currentTime = video.buffered.end(0) - 1;

Answer 5

小心使用video.buffered.end（0）。根据我的经验，它可以与Chrome配合使用，但IE9失败了。

我不知道会发生什么，IE9似乎忘记在缓冲过程结束时对video.buffered.end（）进行最后更新，而video.buffered.end（0）稍微小一点比video.duration。

因此，如果您认为您的网页可以与Chrome之外的其他浏览器一起使用，请不要使用video.buffered.end（0）。

在Chrome中完全缓冲视频

5 个答案: