Player.js: Ended event is not fired for our video

[slavafomin]

Hello there!

Thank you for this new API, it looks much better than Froogaloop.

However, we have some issues with ended / finished event. It's not called for our video. But, if we use some other public video from Vimeo it works OK. Maybe there is some issue with privacy or embed settings? It was working some time ago and was broken recently. We are experiencing this problem for both API versions of Vimeo.

For now I have to use:

timeupdate: function (event) {
  if (event.percent >= 0.95) {
    // Video finished...
  }
}

Also, the last called timeupdate event has percentage around 0.99, it's never called with 1.0, maybe it's somehow related to ended problem.

Thank you!

[landitus]

I have the same issue, the event 'ended' is not fired when the video ends.

var player = new Vimeo.Player($('iframe'));
// Auto-Play video
player.play();

player.on('play', function(data){
  console.log('play');
});
player.on('ended', function(data){
  console.log('Ended');
});

[landitus]

Ok, I should have looked first, but found this issue that solves this problem by removing the api=1 from the API call. Maybe this is something I had from the previous Froogaloop implementation.

[slavafomin]

I have no api=1 in the URL of the video, however, the event is still not fired.

[landitus]

It's odd, some videos fire the event and some do not. The removal of api=1 helped, but still It's not working completely. I'm loading the videos via an Ajax call, btw.

[bdougherty]

Can you please link to any videos that aren't working?

[landitus]

I've been trying to reproduce the bug, but It's pretty random and it's not bound to any particular video. When I find a way to reproduce it I'll paste it here.

[slavafomin]

@bdougherty Please, take a look at my first message. It has the link to the problematic video.

[bdougherty]

Unfortunately there's not a whole lot we can do to fix this at the moment. We have some upcoming changes coming to how we deliver files and I've confirmed that those changes fix the bug.

[slavafomin]

Will wait for it then, thanks. The workaround is working pretty good, so no worries.

[mikegarlick]

Is there a workaround?

This doesn't work either...

player.on('timeupdate', function(data){
console.log('update');
});

[bdougherty]

@mikegarlick make sure you remove the ?api=1 query param from your embed code.

[mikegarlick]

I haven't got the the ?api=1 in the query param. The only callback I that works for me is the:

player.on('play', function(){});

[bdougherty]

@mikegarlick please open a new issue and provide a CodePen or JSFiddle that reproduces the issue.

[slavafomin]

@mikegarlick strange, timeupdate is working fine for me.

[mikegarlick]

@slavafomin can you show me how you have it working? in further detail.

[amowu]

@mikegarlick this is my solution:

var finish = _.once(yourOnFinishFunction);

player.on('timeupdate', function(data) {
  if (data.percent === 1) {
    finish();
  }
});

[slavafomin]

Be advised, that in my case it never reaches 1.0, so you have to check for something like 0.99, e.g.: event.percent >= 0.99.

[LetterAfterZ]

Having this exact same issue on a build right now.

I switched from Froogaloop2, everything else is working except ended.

I've also noticed that despite not adding api=1 in my embed code, it's automatically added to my video - is that an embed setting on my video doing that somehow?

UPDATE:
Strangely I can use; "player.on('finish', function(){ " and that works...

[bdougherty]

@LetterAfterZ I'm not sure how api=1 is being added if it's not in your embed code. As long as it's there, you'll have to use the older method names (including finish). We'd like to make that behavior work a little better, but I'm not sure when we will be able to get to it.

[LetterAfterZ]

Thanks @bdougherty. Turns out one of my 3rd party scripts (fullpage.js - http://www.alvarotrigo.com/fullPage/) thought it'd be useful to add api=1 to every Vimeo video.

I made a quick edit to solve this problem and now we're all good.

[wcndave]

I have this problem too, and I can confirm it seems totally random. The same video, reload page with same code, and ended files about 70% overall.

However there are some scenarios that affect the % failure.

It fails twice as much in Firefox (50) as Chrome
It fails three times as much when you've seeked, ie if you skip to near the end...

This is definitely a problem, and it's not in the player call as a reload gives different results each time.

[wcndave]

The temporary fix above for checking timeupdate has one problem in IE (11 tested).

If you do:

player.on('timeupdate', function(data){ console.log('update: ' + data.percent); if (data.percent >= 0.998){ finishActions(); } });

Then the actions are repeated indefinitely. Ie the console shows "update: 1" again and again....

The way I got around it was to add player.pause(); after the call to finishActions.

[slavafomin]

@wcndave of course, because timeupdate event is called multiple times per second while video is playing. It was simplified example. If you want to call your finish method only once, then you need to introduce some flag variable in order to prevent multiple executions.

Example

timeupdate: function (event) {
  if (!finishCalled && event.percent >= 0.95) {
    finish();
    finishCalled = true;
  }
}

[wcndave]

Ah, no, I mean after the video is finished. it does NOT do this in other sensible browsers (chrome, FF, Opera all tested). because once the video is stopped, it stops doing the time updates. however the reason for doing this in the first place is that "ended" doesn't work.

Yet, for some strange reason, the video stops but does not "end" in other browsers, and does not stop or end in IE... odd.

[slavafomin]

@wcndave Oh, I see. Good to know )

Sadly, Vimeo's API is not as stable as I it should be. And it seems like these bugs are getting ignored for at least four months, which is even worse, because we pay for at least two premium Vimeo accounts regularly.

[wcndave]

Yes, I pay for one as well, and the ability to trigger some action at the end of a video is quite fundamental to what we do. If you watch the API demo, they go on about the best player there is, but it seems to be falling some way short right now.

[bdougherty]

@slavafomin this is a player bug, and it affects more than just the API. As I stated earlier, there is an upcoming change that we are working on that will fix it, but it's a pretty big one and I can't give you an estimate other than saying it's a high priority thing for us. It is not being ignored.

[morningcocoa]

It's been 15 days since the last comment. What is the update? I just encountered this issue as well.

[mikegarlick83]

@morningcocoa this has been an ongoing thread for month/years - I wouldn't hold your breath.

[Nostrabramus]

I already posted a similar thread here https://github.com/vimeo/player.js/issues/97 .
In my experience the problem happens after the mouse pointer go over the player.

We also pay for a premium account, and I need this feature to be fixed as soon as possibile, please can you give feedback?

[flori27]

Some video's get "ended", some don't and some trigger "ended" to soon. I have a business account and this issue effects my corporate application. Please fix this ASAP.

[bdougherty]

Hi, everyone. We recently made an update to the player that should resolve this issue for good. I’m going to close this issue, but please comment with a link to the video if you’re still seeing this happen and we’ll take a look.

[dstorozhuk]

I still having issue with ended, seeked
I am adding the player as described here https://developer.vimeo.com/apis/oembed#arguments, using oembed endpoint and HTML returned by endpoint.

When I doesn't add the &api=true to the oembed endpoint - I doesn't have ?api=1 in iframe url.
and ended, seeked as well as seek , finish doesn't triggered.
But If I add &api=true to the oembed endpoint, ?api=1 appears in iframe url, and seek fired.
Also, seek fired at the end of the video with no user interaction, with data.seconds == 0.

PS. the way how I am construction player:

1. in the parent window AJAX call no the page send request to server.
2. Server call oembed endpoint
3. Server returns JSON, with oembed iframe HTML
4. in the parent window On AJAX success, client trigger JS code to open jQuery UI dialog with oembed iframe HTML returned from server.
5. in the parent window client load https://player.vimeo.com/api/player.js
6. in the parent script get the reference to the player with the following code:

window new Vimeo.Player($('#drupal-modal iframe'));

[ahmadawais]

Same issue here two years after this issue.

Looks like if the video is less than 1min long ended event works for me 2.5 mins long video it doesn't.

[luwes]

@ahmadawais Could you post some clips where this is the case? Thanks

[ahmadawais]

OK, turns out I had to add Empty screen from the Embed settings on Vimeo (don't choose anything that's like a loop coz loop doesn't trigger the ended event).

@luwes if we can have a debug: true sort of setting which gives verbose logs of what's happening this would never happen.

Also you can close this issue now.
Peace! ✌️

[luwes]

Ah I see, thanks for the feedback. Not sure if we'll be able to add that debug feature but I'll bring it up.

[ballcarsen]

@luwes player ended isn't firing for this video https://vimeo.com/92182340

[abhinayar]

Same issue here. And it's been YEARS. We also pay for a premium Vimeo account, and I'm mind blown that you guys can't solve something like this with this much time. "seeked" and "timeupdate" not firing or firing RANDOMLY at times... I can't deliver a product where the UI depends on timeupdates and seeked events with it only working SOME of the time.

Will this even be addressed?

[HrudakovSerhii]

I am observing similar issue. 'ended' event won't be fired if 'background' option set to true. Otherwise it works as expected. Sorry, found it ;)
https://github.com/vimeo/player.js/issues/200

[abhijeet9920]

Can I play another video after current one is ended? Here is what I've used for

var options = {id:9011932,width:640,autoplay:true};
var player = new Vimeo.Player("vimplayer", options);
player.on("ended", function(){
    console.log("Video called");
    var player = new Vimeo.Player("vimplayer",{id:76979871,autoplay:true,width:640});
    player.on("play", function(){
        console.log("Video played");
    });
});`

This seems not working for me.

[Sydrik]

I'm having the same issue while working on Laravel. I've done some troubleshooting and have narrowed down to a yet-to-identify conflict with the default public/js/app.js. When I excluded app.js or removed the defer attribute, Vimeo's video events work. I don't know whether you are building on Laravel or any other platform, but it is likely to be some conflicting JavaScript that is residing in your framework. Hope it helps narrow down the investigation.

[abhijeet9920]

@Sydrik , thanks for your response, I'm using drupal 8, and that code snippet I'd shared was in plain php file without any serverside operation. Thank you