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

Question

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

htmlvideointernet-explorer-9buffer

3

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

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

我将视频设置为预加载='auto';
我创建了一个setInterval，其中包含一个每200毫秒查看video.buffered.end（0）属性并将其与video duration进行比较的函数。

在Chrome和Firefox上，video.buffered.end(0)最终达到视频duration => OK！

在IE9上，video.buffered.end(0)达到视频duration的+/- 85％，然后停止进展。但网络指示视频已完全加载。

我尝试使用video.seekable.end(0)，但它直接设置为视频duration。

那么，如何检测IE9（和其他浏览器）中html5视频已完全缓冲？

感谢您的回答！

- Dany

希望这能回答你的问题 - 强制Chrome完全缓冲mp4视频。 - GingerHead

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Igor Gilyazov · Accepted Answer

<!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>

这里有更多相关参考如何让Chrome完全缓存mp4视频。