Почему не срабатывают нативные события у HTML5 video?

Question

[Денис Букреев]

Ставлю видосикам загрузку только metadata


С помощью API js пробую разные методы для определения того, что данные видео загрузились:

// этот локально отлично срабатывает, на удаленном сервере уже выборочно (обычно 2 из 5 видоса, иногда 0)
it.player.addEventListener('loadeddata', function () {});

// аналогично loadeddata, но сильно хуже
it.player.addEventListener('loadedmetadata', function () {});

// аналогично, но срабатывает многократно
it.player.addEventListener('canplaythrough', function () {});

Много кода там в итоге, но суть вот в чем: при window.onload, в цикле я перебираю блоки, в них нахожу видосики и назначаю им этот listener
Почему локально отрабатывает все нормально, а на удаленном сервере - жопа?
Как нормально отследить, что видос готов к воспроизведению?

Answer 1

[Денис Букреев]

Решение есть!

it.player = it.$player.find('video')[0];
let playPromise = it.player.play(); // оказывается, что .play() работает как обещание (Promise())

// когда видео готово к воспроизведению
playPromise.then(_ => {
    it.player.pause();
    // все, можно делать с видео что душе угодно
}).catch(error => {
    console.log('не загружается: ' + error);
});

Работает в Chrome, Firefox, Opera, Safari, а IE пока слоупочат и отравляют нам, фронтендам, жизнь.

Answer 2

[Илья Герасимов]

Скорее всего потому, что локально скрипты подгружаются быстрее и event'ы нормально навешиваются, на проде все немного хуже с загрузкой и событие отрабатывает раньше, чем мы вешаем на него event, другого объяснения не вижу. Решение если загрузилось делать что хотели, иначе вешаем event и слушаем

Comments

[Денис Букреев]

я тоже думал об этом и придумывал как это решить
и пробовал работать сразу, без слушания события - результат тот же

но вот что интересно, убрав source теги и добавив ссылку в атрибут src - все начало работать как надо и даже загружаться стало лучше намного.
интересно, с чего бы так, вроде наоборот должно быть.

[Илья Герасимов]

Денис Букреев, не знаю причину с сурсами, но погуглив пришел к выводу что да, когда выстреливает window.onload, loadeddata уже с некоторой вероятностью может выполняться. Попробуй цепляться к loadeddata не в window.onload а в DOMContentLoaded