如何知道< video ></video>元素中的视频何时已完全加载？

Question

我希望通过jQuery或Javascript检测html5标记中的特定视频是否已完全加载(我的意思是，下载到浏览器的缓存中)。视频具有preload = "auto“属性。

我尝试了我力所能及的一切(我是一个初学者)，但没有成功。似乎找不到任何我可以收听的事件，有没有办法这样做？

PS:我遇到的唯一一件事是视频对象的network_state属性，但web周围的引用似乎与它返回的状态不一致，当我尝试它时，我没有找到“已加载”的状态。

编辑:我找到了一个我认为可以使用的事件，canPlayThrough。我测试了它，它似乎工作了，但我不确定它是否真的告诉我视频已经完全加载，或者只是它加载了足够的数据开始播放(这是不好的)。

Answer 1

您可以绑定到ended：

$("video").bind(eventname, function() {
   alert("I'm done!");
});

其中eventname是要列出到的事件

有关事件的完整列表，请单击此处-> http://dev.w3.org/html5/spec/Overview.html#mediaevents

更新：

要获得加载的百分比，您可以使用2个事件的组合：

$("video").bind('durationchange', checkProgress);
$("video").bind('progress', checkProgress);

function updateSeekable() {
  var percentageComplete = (100 / (this.duration || 1) *
    ($(this).seekable && $(this).seekable.length ? $(this).seekable.end : 0)) + '%';
}