Vimeo end screen overlapping the video

[vishnukgtechpearl]

Expected Behaviour

Automatically play next video.

Actual Behaviour

Showing vimeo end screen

Issue in detail

I am using ends event to trigger my play next video function and in that I am using player.loadVideo to load the next video. By doing this I am expecting play the next video after finishing one. it was working perfectly for more than last one year. But in recent days I noticed that - After finishing a video player will show vimeo end screen instead of next video, And I see that video playing in background,I debug and found that player.loadVideo successfully rendering next video, but because of the end screen video not showing. I noticed this mainly in chrome, here you can see the behaviour https://www.window-swap.com/Window, This is not happening every time but happening quiet often.

[gr3p]

I have the same issue. Please post if anyone have a solution.

[vishnukgtechpearl]

I managed this issue using 'progress' event, use 'progress' event and go to next video before reaching end, may be 20 or 30 sec prior to the end.

[stephenscaff]

Seeing this issue as well.

I have an endless playlist lib, where on video ended, I load the next vid.

In Chrome (haven't tested elsewhere yet), if the player is not visible, as in it's scrolled out of view, the end screen overlays.

Next vids load and play, but the end screen overlays the player.

Suppose I could try the progress event as mentioned above... but would rather not. Seems too hacky.

You can see the issue with my Demo, though that published demo has audio muted and isn't logging.

Thanks!

[gr3p]

I addressed this issue by implementing a workaround that utilizes heartbeat monitoring. If the video fails to function properly, my heartbeat monitor will detect it and initiate a reload, or any other desired action.

[stephenscaff]

Interesting @gr3p. Thanks for reporting back.

In my context, I want next video to play as the current ends. Before I was using 'onEnded' to call next.

Now I use onTimeupdate to listen until the vid is almost over, then call next .

So, something like:

player.on('timeupdate', (data) => {
  const currentTime = data.seconds
  const duration = data.duration
  const threshold = 0.5
  if (duration - currentTime <= threshold) this.next()
})

Seems to do the trick for now with my situation.

[gr3p]

Ok. For me this code extract below was the trick to avoid the playback from sometimes stop. Maybe in your code it could be a fallback just to make it bulletproof. @stephenscaff.

let isVideoPlaying = false; 

function heartbeat() {
    if (isVideoPlaying) {
        console.log('Heartbeat: Video is playing...');
        setTimeout(heartbeat, 1000);  // Send the next heartbeat in 1 second
    } else {
        console.log('Heartbeat: Video has stopped...');
        // Implement actions here, e.g., reload the vimeo / page etc.
    }
}

  var player = new Player('vimeo');

    // Start heartbeat when the video starts playing
    player.play({ autoplay: true, loop: false }).then(function () {

        isVideoPlaying = true;
        heartbeat();  // Start heartbeat

    }).catch(function (error) {

    });

    player.on('ended', function (ended) {
        console.log('THE VIDEO HAS ENDED!');
        isVideoPlaying = false;  // Stop heartbeat
        // ...
    });

    player.on('timeupdate', function (data) {
        console.log('Movie Progress: ' + data.percent);
        isVideoPlaying = true;  // Update heartbeat
        // ...
    });

    player.on('error', function (error) {
        console.log('Vimeo playback error:', error);
        isVideoPlaying = false;  // Stop heartbeat
        // ...
    });
    `