在 Chrome 中完全缓冲视频答案

【问题标题】：Fully buffer video in Chrome在 Chrome 中完全缓冲视频
【发布时间】：2014-02-07 13:25:24
【问题描述】：

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

我在亚马逊 S3 上以 .mp4 和 .webm 格式主持电影。在 HTML 中，我使用标准的 <video> 标签。服务器以状态206 Partial Content 响应。这很棒，因为它允许浏览器下载视频的任何部分，但我需要能够立即查找文件的任何部分。

我试过了：

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

欢迎任何帮助！

ps。我知道 od 和类似的问题，但我希望在被问到之后有所改变。

【问题讨论】：

你有没有看过这里的答案中的两个选项......要么是 XHR 解决方案，要么是使用 MediaSource API 滚动你自己的登录的更具挑战性的选项......stackoverflow.com/questions/18251632/…
@Offbeatmammal - 我试过 XHR，但不是自定义媒体 API。将不得不尝试。
只是一个想法...也许您可以考虑创建不同的视频标签并在每个标签中预加载不同的视频片段。然后，在搜索时，将 currentTime 和播放请求转换为适当的请求。绝对不是一件好事，但可能是一种选择。如果提前知道长度和缓冲时间，您可以尝试Media Fragments...

标签： javascript html google-chrome video buffer

【解决方案1】：

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

【讨论】：

我刚刚在 Chrome 50.0.2645.4 dev（64 位）上尝试过类似的方法，但似乎不起作用。

【解决方案2】：

您尝试过canplaythrough 事件吗？

不是传统意义上的，我是说。而是以“hacky”的方式。 canplaythrough 当浏览器检测到它有足够的缓冲视频可以连续播放而不会暂停时触发。我猜这个事件的触发时间与 chrome 暂停缓冲的时间差不多。如果是这种情况，它可以用来触发对视频其余部分的请求。

【讨论】：

感谢您的回答。您知道可以使用哪种方法，以便我可以发送请求以获取更多数据吗？

【解决方案3】：

我没试过，但是 HTML5 视频对象包含一个缓冲属性

var video = document.createElement('video');
video.buffered.start(0);
video.buffered.end(0);

您可以尝试监控缓冲的（例如使用此线程chrome html5 video buffered.end event）

然后使用

不断将当前时间更改为缓冲时间之前的时间

video.currentTime = video.buffered.end(0) - 1;

【讨论】：

【解决方案4】：

有几种方法可以一直加载视频然后播放：
1. 有一种不错的浏览器开发者会引以为豪的方式：

var video = document.createElement('video');
video.src='myvideo.mp4';
document.appendChild(video);
video.load();
video.addEventListener('loadedmeta',function(){
video.play()
});

2。还有懒惰的“但是，我会得到心皮隧道！”开发者方式：

<video src='myvideo.mp4' onloadedmeta='this.play()' preload></video>

来源：
http://www.w3schools.com/tags/tag_video.asp
how to run js code when video is fully buffered/loaded
How do I add new Video entirely from JavaScript?
javascript with html <video> load() & play() function not firing http://www.w3.org/wiki/HTML/Elements/video

【讨论】：

【解决方案5】：

小心使用 video.buffered.end(0)。根据我的经验，它适用于 Chrome，但适用于 IE9。

我不知道会发生什么，IE9 似乎忘记在缓冲过程结束时对 video.buffered.end() 进行最后一次更新，并且 video.buffered.end(0) 有点小比 video.duration。

因此，如果您认为您的页面可以与 Chrome 以外的其他浏览器一起使用，请不要使用 video.buffered.end(0)。

【讨论】：