在Chrome中完全缓冲视频 [英] Fully buffer video in Chrome

问题描述

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

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

我试过了：

1. .PROGRESS code>事件。当Chrome停止缓冲第一部分时，连接被终止。下一部分以新连接下载，因此JavaScript无法继续检查总下载数据。即使可以，旧数据也不会存储在缓存中。此方法适用于Firefox和Safari。甚至在IE10中！


2. XHRS 。我可以完全下载电影，但是当视频开始播放时，Chrome会尝试再次从服务器下载电影。我甚至试图在base64中将电影传递到HTML中，但是这对数据来说是很多的


3. FileAPI 。 Chrome无法创建足够大的BLOB并崩溃。

欢迎任何帮助！

ps。我知道od和类似的问题，但是我希望自从问他们之后有所改变。

解决方案

因为S3支持部分下载， Chrome最初在播放头前缓冲只需要什么，然后停止缓冲。当视频开始播放时，它将继续缓存只需要什么。这意味着，根据用户的下载速度，它会暂时停止缓冲，只是因为它有足够的缓冲区来连续播放。

但如果您在播放完一段视频后暂停视频，则Chrome浏览器将不会停止缓冲，并一直持续到最后。

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

在Chrome 32上测试

  //在后台创建视频并开始播放
 var video = document.createElement（'video'）; 
 video.src ='video.mp4'; 
 video.controls = true; 
 video.muted = true; 
 video.play（）; 
 
 //开始播放后立即暂停。 
 video.addEventListener（timeupdate，function（）{
 if（this.currentTime> 0）{
 
 this.pause（）; 
 video。 muted = false; 
 video.currentTime = 0 
 this.removeEventListener（timeupdate，arguments.callee，false）; 
 
 //当整个视频被缓冲时，显示视频如果（Math.round（video.buffered.end（0））/ Math.round（video.seekable.end（0））在页面
 video.addEventListener（progress，function（）{
 if ）== 1）{
 document.body.appendChild（video）; 
 this.removeEventListener（progress，arguments.callee，false）; 
} 
}，false ）; 
} 
}，false）; 
  

Is it possible to fully buffer HTML5 video in Chrome (and Opera)?

I host the movie in .mp4 and .webm on amazon S3. In HTML I use standard <video> tag. The server responds with status 206 Partial Content. It is great, as it allows the browser to download any part of the video but I need to be able to seek instantly to any part of the file.

I tried:

1. .PROGRESS event. When Chrome stops buffering the first part, the connection is killed. The next parts are downloaded in new connection, so JavaScript isn't able to continue checking total downloaded data. Even if it could, the old data isn't stored in cache. This method works in Firefox and Safari. Heck, even in IE10!
2. XHRS. I am able to fully download the movie, but when the video starts playing, Chrome tries to download the movie from the server again. I even tried to pass the movie into HTML in base64, but that's to much data
3. FileAPI. Chrome isn't able to create BLOB big enough and crashes.

Any help is welcome!

ps. I am aware of od and similar questions, but I hope something changed since they were asked.

解决方案

Because S3 supports partial downloads, Chrome initially buffers "only what's needed" in front of the playhead and then stops buffering. It will continue buffering "only what's needed" when the video starts playing. This means that depending on the user's download speed it will stop buffering now and then, just because it has enough buffer to play continuously.

But if you pause the video after having played some, Chrome will not stop buffering and go through all the way to the end.

This example exploits that technique to entirely buffer the video off screen before showing it on the page.

Tested on 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);

这篇关于在Chrome中完全缓冲视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！