Как я могу узнать, когда видео внутри элемента <video></video> полностью загружено?

Question

Я хочу обнаруживать через jQuery или Javascript, когда определенное видео внутри тега html5 было полностью загружено (я имею в виду, загружено в кеш браузера). Видео имеет атрибут preload = "auto".

Я старался изо всех сил, чтобы сделать это (я новичок) без удачи. Кажется, я не могу найти ни одного события, которое мог бы прослушать, есть ли способ сделать это?

PS: единственное, с чем я столкнулся, это свойство network_state видеообъекта, но ссылки в Интернете, похоже, не согласуются с возвращаемым состоянием, и когда я попробовал его, я не нашел состояния для "ЗАГРУЗЕНО".

РЕДАКТИРОВАТЬ: я нашел событие, которое я могу использовать, canPlayThrough. Я проверил его, и оно, похоже, работает, но я не уверен, действительно ли оно говорит мне, что видео полностью загружено или просто загружено достаточно данных, чтобы начать воспроизведение (что нехорошо).

Answer 1

Вы можете привязать к завершенному событию:

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

Где событие - это событие, которое вы хотите отобразить на

Полный список событий здесь -> 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)) + '%';
}