是否可以在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);
