How to add event listener to videojs when start to play a video?

Question

How do I add event listener to videojs when the video is start to play? (this event should be called at the begging of the play)?

I searched on Player Events docs, but I can't find any event that tell me "now the video is start play".

I'm not familiar with this player framework, but based on the demos it seems to me that it uses ` — bgazsi, Dec 05 '19 at 13:50

score 19 · Accepted Answer · answered Dec 05 '19 at 14:20

19

You can do this videojs way.

play.on('play', () => { });

answered Dec 05 '19 at 14:20

Shlomi Levi

score 0 · Answer 2 · answered Dec 05 '19 at 13:46

0

right there on the docs you have the timeupdate event, you could set a flag to true when it starts.

answered Dec 05 '19 at 13:46

Jenaro Calviño

event time this function is invoked. I have to use a global var to know if it starts. I looking if videojs have this option – Jon Sud Dec 05 '19 at 13:49

score 0 · Answer 3 · answered Dec 05 '19 at 13:53

That's only a "skin" for HTML5 player, you can access the original HTML5 element by .player() function, and then use those:

var vid = myplayer.player();
vid.onplay = function() {
    alert("The video has started to play");
};

player()

Return the component's player

score 0 · Answer 4 · answered Dec 05 '19 at 14:06

You will see many events are emitted. Most importantly,

play - Playback has begun.

We can add an event listener to the element listening for this event:

document.querySelector('.video').addEventListener('play',  evt => { 
   // code you want to happen when the video plays
});

Note: document.querySelector('.video') is just a filler, select the element however you want to

I suggest this over @FlashThunder's solution because you can add multiple listeners and for other reasons.

4 Answers4