在Chrome中完全缓冲视频

Question

在Chrome中完全缓冲视频

javascripthtmlgoogle-chromevideobuffer

13

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

我将电影托管在Amazon S3上的.mp4和.webm文件中。在HTML中，我使用标准的

- Michal

1

你看过这里回答中的两个选项了吗？一个是使用XHR解决方案，另一个是使用MediaSource API自己编写登录功能，后者更具挑战性。https://dev59.com/y2Ml5IYBdhLWcg3woYIv - Offbeatmammal

@Offbeatmammal - 我已经尝试过XHR，但没有使用自定义媒体API。我得试试看。 - Michal

只是一个想法...也许你可以考虑创建不同的视频标记，并在其中每一个预加载一个不同的视频片段。然后，在寻求时将当前时间和播放请求转换为适当的时间。这绝对不是一个好的做法，但可能是一个选项。如果长度和缓冲时间已知，您可以尝试使用Media Fragments进行实验... - jbalsas

5个回答

2

你尝试过canplaythrough事件吗？

我指的不是传统意义上的尝试，而是一种“hacky”的方式。当浏览器缓存足够的视频以连续播放而无需暂停时，就会触发canplaythrough。我猜测这个事件触发的时间与chrome暂停缓存的时间大致相同。如果是这样的话，它可以用来触发对剩余视频的请求。

- Hammad Akhwand

谢谢你的回答。你知道有哪些方法可以用来发送请求以获取更多的数据吗？ - decho

1

我没有尝试过，但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;

- Neablis

0

使用 video.buffered.end(0) 时要小心，根据我的经验，在 Chrome 上它有效，但在 IE9 上失败了。

我不知道发生了什么，IE9 似乎忘记在缓冲过程的最后更新 video.buffered.end()，而且 video.buffered.end(0) 稍微小于 video.duration。

所以，如果你认为你的页面可能会在 Chrome 之外的其他浏览器上使用，请不要使用 video.buffered.end(0)。

- Dany

-1

有几种方法可以加载视频并播放：
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
如何在视频完全缓冲/加载时运行js代码
如何从JavaScript完全添加新视频？
javascript与html <video> load()和play()函数未触发 http://www.w3.org/wiki/HTML/Elements/video

- bren

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

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

- Duvrai · Accepted Answer

由于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);