javascript - 我怎么知道 元素内的视频何时完全加载？

Question

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

我尽我所能做到这一点(我是初学者)但没有运气。似乎找不到我可以收听的任何事件，有什么办法可以做到这一点吗？

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

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

Answer 1

您可以绑定(bind)到已结束的事件:

$("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)) + '%';
}