Question

你能告诉我如何加载一定数量的HTML5视频吗？例如，如果我有一个10秒的视频，我希望它只在加载至少5秒时启动。我怎样才能确定发生的时间？

修改：我们假设视频正在加载，而且它位于.pause()位置.stop()

Answer 1

您可以阅读视频元素的buffered属性，以查看已加载的时间范围。 buffered属性是已加载的时间范围的集合;您可以使用n和buffered.start(n)阅读buffered.end(n) ^th范围的开头和结尾。由于您对第一个范围的结束时间感兴趣，因此您可以使用videoElm读取某些视频videoElm.buffered.end(0)上加载的秒数。

<video>元素触发progress个事件，表明它已加载了一大块新数据（因此buffered中某个时间范围的结束时间正在增加）。< / p>

您可以在每次progress事件后检查加载的缓冲区是否足够大：

var someVideo = document.getElementById("myVideoId");

someVideo.addEventListener("progress", function playOnLoad(e) {
    var theVideo = e.target;
    if(theVideo.buffered.length > 0 &&    // if we have a buffer
       theVideo.buffered.end(0) >= 5) {   // if first buffer is at least 5 secs
        theVideo.play();
        theVideo.removeEventListener(playOnLoad);
    }
});

如果您确实对视频是否可以安全播放而不中断感兴趣，则浏览器会使用canplaythrough事件。当浏览器预测视频的加载速率允许它不间断地播放时，浏览器将触发此事件（但如果加载速率突然改变，有时可能会出错）。

Answer 2

我不相信这是可能的，因为当视频准备播放时，每个浏览器都会在几秒钟内完成自己的测量，例如浏览器控制缓冲区负载。

视频元素上的preload属性为您提供某种形式的控制，但不是几秒钟，而不是跨浏览器的一致性。

查看此page上的表格。

我不确定你为什么会控制它。你唯一应该担心的是视频是否可以播放。

this.video.on('canplaythrough', function () {
    this.video[0].play();
}.bind(this));

如果由于某种原因您需要提前捕获事件，请查看此page以了解其他事件。

加载一定量后启动HTML5视频

2 个答案: