player.js: No way to catch errors on instantiation

This was first mentioned in #57, but note that it is a separate issue hence the new ticket.

When instantiating a player with new Vimeo.Player() with a URL that triggers a 404 (not found) or 403 (privacy settings) error, there is no way to catch this error.

Expected Behavior

player = new Vimeo.Player( ... ) // with private video ID
player.on( 'error', ... )

Error handler is called.

Actual Behavior

Error handler is not called.

Steps to Reproduce

See above


This makes for pretty terrible UX when the player is embedded in a webapp. The user gets no visual feedback from the player; it just doesn’t load. And since no error handler is called it’s also impossible to give feedback via the app interface about it.

The only way is around it is to use loadVideo, which does give you a way to intercept errors (although this doesn’t work sometimes either, that’s what #57 is about). The problem here is, there is no way to create a player without first setting a video url and therefore loading it, as the player on instantiation checks the iframe for a valid source and blows up if it doesn’t find one. So we have to do a workaround of initially set a url to a small dummy video to get the player instantiated, and then call loadVideo to load the actual video and check for errors.

Please give us some way to catch errors during instantiation. 🙏

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 3
  • Comments: 31 (13 by maintainers)

Most upvoted comments

That works, awesome! Even though I had to change it slightly to:

player = new Vimeo.Player( ... )
player.ready().catch(...)

Otherwise the player variable would not be a reference to the actual player in case of a successful instantiation.

Unfortunately, the error you receive here does not contain any status codes, the only thing you have is the message, which is variable as well (“https://vimeo.com/...” is not embeddable.). So you’d be stuck having to do a regex check on the error message (and pray they never change it) facepalm

What I do now is ‘simply’ call the API myself, and check the HTTP status code of the return.

Hey guys, the fix is out in: https://github.com/vimeo/player.js/releases/tag/v2.6.2

Sorry for the delay. If you have any questions, please don’t hesitate to reach out!

Hey Sorry @wesbos I had almost finished working on this and got caught up in something else and forgot to wrap it up. I’ll have this hopefully by EOD, and if not by tomorrow early on in the day.

@Silviu-Marian this is not intended and we are aware. However, it may take some time to be addressed given our current priorities on the player. If its possible to do without an API change, I’m happy to review and approve any PR around this. if not, I will try and get to it when our workload dies down!

😄 Thanks! CC @lfades

@wesbos API team has it in CI now, testing it. Should have something out tomorrow.

@wesbos API team has it in their weekly pipeline so just waiting on them! Thanks for checking in.

After checking this out and playing around, I don’t think the way described in the issue ticket will work:

player = new Vimeo.Player( ... ) // with private video ID
player.on( 'error', ... )

Even if I dispatch an error event on the player object when we 404 or 403, we don’t catch it because we error before we ever attach the event handler.

I think the best way to handle this will be to use the ready() promise. I am going to adjust it to give more detailed information on whether it is a 404 or 403 so that you can handle the issues accordingly.

Hmm… something else is working for me (don’t know any private videos, so just passed an invalid id)

player = new Vimeo.Player( ... ).ready().catch(...)

Technically, it’s catching at instantiation 🤔