javascript – 在Chrome中完全缓冲视频

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

我在amazon S3上的.mp4和.webm中托管电影.在HTML中,我使用标准< video>标签.服务器响应状态206部分内容.这是伟大的,因为它允许浏览器下载视频的任何部分,但我需要能够立即寻求文件的任何部分.

我试过了：

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

欢迎任何帮助！

PS.我知道od和类似的问题,但我希望有一些改变,因为他们被问.

解决方法

由于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",false);
            }
        },false);
    }
},false);