Question

我必须在播放之前完全缓冲html5视频。

但我找不到通用的解决方案。

我将视频设置为preload ='auto';
我创建了一个setInterval，其中一个函数查看video.buffered.end（0）属性每200毫秒，我将其与视频持续时间进行比较。

在Chrome和Firefox上，video.buffered.end（0）在while =＆gt;之后达到视频时长。好！在IE9上，video.buffered.end（0）达到视频持续时间的+/- 85％并停止前进。但网络表明视频已满载。

我尝试使用video.seekable.end（0），但它直接设置为视频时长。

那么，在IE9（以及其他浏览器）中如何检测html5视频是完全缓冲的？

谢谢大家！

Answer 1

<!DOCTYPE html>
<html>
<head>
<title>Preload video via AJAX</title>
</head>
<body>
<script>
console.log("Downloading video...hellip;Please wait...")
var xhr = new XMLHttpRequest();
xhr.open('GET', 'BigBuck.m4v', 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.
    var video = document.getElementById("video");
    console.log("Loading video into element");
    video.src = vid;
    // not needed if autoplay is set for the video element
    // video.play()
   }
  }

xhr.send();
</script>

<video id="video" controls autoplay></video>

</body>
</html>

此处有更多参考资料Force Chrome to fully buffer mp4 video。

HTML5视频，如何检测视频是完全缓冲的？

1 个答案: