另一个:强制Chrome完全缓冲mp4视频

Question

另一个:强制Chrome完全缓冲mp4视频

Owe*_*wen 21 video html5 mp4 buffer google-chrome

我已经看到了一些关于这个的线索,但是没有答案,所以我想我会在污染的youtube相关页面中添加另一个.

我有一个100MB的mp4视频需要浏览器完全下载,

然而,当它被完全下载时没有发生任何事件,并且Chrome似乎停止缓冲视频,直到当前视频时间几乎达到缓冲区的末尾,然后它会请求更多.

如何让浏览器完全下载视频并将其缓冲100%？

谢谢

Answer 1

Off*_*mal 39

可悲的是,Chrome - 就像其他HTML5浏览器一样 - 试图明智地下载它的内容并避免不必要的带宽使用......这意味着有时候我们会留下次优的体验(具有讽刺意味的是,YouTube受此影响很大,以至于有扩展强制更多预先缓冲!)

也就是说,我没有发现这需要经常使用良好的服务器和良好的连接 - 但如果你需要的东西,我发现的唯一解决方案是一个大锤...使用Ajax下载文件,您想要播放然后将其加载到视频元素的源中.

下面的示例假设您的浏览器支持m4v/mp4 - 如果您无法保证(例如)Chrome,您可能希望使用canPlayType测试为您的用户选择最合适的视频格式.您还需要测试以查看它处理您想要的大小的视频的程度(我已经尝试了一些相当大的视频,但不确定这将会可靠地处理的上限)

样本也非常简单......它启动了请求,并且在加载时不会向用户传达任何信息 - 使用您的大小视频,您可能希望显示进度条只是为了让他们感兴趣. .

这个过程的另一个缺点是,在你完全下载文件之前它不会开始播放 - 如果你想更深入地从你的缓冲区动态显示视频,那么你需要开始钻研前沿(目前MediaSource在http://francisshanahan.com/index.php/2013/build-an-mpeg-dash-player-from-scratch/等帖子中描述的世界

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，3 月前
查看次数：	37842 次
最近记录：	7 年，9 月前