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

Question

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

我竭尽全力做到这一点（我是初学者），但没有运气。似乎找不到任何我可以听的事件，有什么办法吗？

PS：我唯一遇到的是video对象的network_state属性，但是网上的引用似乎和它返回的状态不一致，我试了也没找到状态对于“加载”。

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

Answer 1

您可以绑定到结束的事件：

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