CODEWITHSUNDEEP
javascriptvimeovimeo-api
S_R
S_R

Reputation: 1998

Vimeo API firing multiple events on end

I'm using the Vimeo API, and the documentation states, to catch the end of a video use the following code

player.on('ended', function(data) {
  // `data` is an object containing properties specific to that event
});

Which works great, but when the video has ended, the vimeo video player stops the video (obviously), but places the progress back to 0.00.

Because of this, the pause and seeked events are also fired, meaning when a video ends, the events triggered look like this

enter image description here

It makes sense why it's triggering the pause and seeked events also, but it is far from ideal. I'm wanting to send an ajax request to save the progress, meaning if I listen for the ended event, it's going to fire 3 times.

Has anyone come across this before and figured a way around it?

Upvotes: 2

Views: 1929

Answers (2)

Ryan Jarrett
Ryan Jarrett

Reputation: 11

I had a similar issue when I was using the API to trigger GA events in Tag Manager. It was generating two additional pause events each side of the ended event. In the end I had to inspect the event label and percent value, and if they equalled pause and 1 respectively I ignored that event. Worked well. Perhaps something similar could be done for seeked event, checking for percent equalling 0 and following the pause at 1 event?

Upvotes: 1

S_R
S_R

Reputation: 1998

There is no way to fix this directly with the API as far as i'm aware, my method of getting around this was to watch the progress, check when the video was nearly finished and removed the bindings and set the progress as complete.

videoPlayer.on('progress', (data) => {
//If the player percent is over 0.95, updateProgress to 100% and remove all listeners
    if(data.percent > 0.95){
        //Manually set the data to 100
        data.percent = 1;
        //Remove the listeners
        videoPlayer.off('pause');
        videoPlayer.off('seeked');
        videoPlayer.off('progress');
        //Update the progress to be 100
        updateProgress(data, 'seeked');
    }
})

This turned out to be a better work around for my scenario anyway, as our videos have credits on the end, and the users ended up clicking off the video during the credits meaning the video was never technically marked as complete.

Upvotes: 1

Related Questions