Why don't native events fire on HTML5 video?

Question

JavaScript

So it goes.
I set videos to load only metadata

Using the js API, I try different methods to determine that video data has loaded:

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

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

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

There is a lot of code there in the end, but the bottom line is this: when window.onload, in a loop, I go through the blocks, find videos in them and assign this listener to them.
Why does everything work fine locally, but on a remote server - an ass?
How to properly track that the vidos is ready to play?

Answer 1

There is a solution!

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

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

It works in Chrome, Firefox, Opera, Safari, and IE is still slow-paced and poisons us, front-ends, life.

Answer 2

Most likely because scripts are loaded faster locally and events are normally hung, everything is a little worse with loading and the event is processed before we hang an event on it, I see no other explanation. The decision if it loaded to do what they wanted, otherwise we hang up the event and listen