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

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

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

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

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

Много кода там в итоге, но суть вот в чем: при window.onload, в цикле я перебираю блоки, в них нахожу видосики и назначаю им этот listener
Почему локально отрабатывает все нормально, а на удаленном сервере - жопа?
Как нормально отследить, что видос готов к воспроизведению?
  • Вопрос задан
  • 501 просмотр
Решения вопроса 1
@denisbookreev Автор вопроса
Решение есть!

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 пока слоупочат и отравляют нам, фронтендам, жизнь.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
Скорее всего потому, что локально скрипты подгружаются быстрее и event'ы нормально навешиваются, на проде все немного хуже с загрузкой и событие отрабатывает раньше, чем мы вешаем на него event, другого объяснения не вижу. Решение если загрузилось делать что хотели, иначе вешаем event и слушаем
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы