Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vimeo Player Stuck Loading #842

Closed
Hanley1 opened this issue Jun 24, 2022 · 19 comments
Closed

Vimeo Player Stuck Loading #842

Hanley1 opened this issue Jun 24, 2022 · 19 comments

Comments

@Hanley1
Copy link

Hanley1 commented Jun 24, 2022

Expected Behavior

Video plays

Actual Behavior

Video gets stuck in loading process, showing endless circle animation

Steps to Reproduce

I have a user reporting this issue when they try to load videos on our site.

Example: Go to www.audiblegenius.com/course/bb1/section_1/drums_1/earned, hit the play button.

We cannot recreate it on our end. He's experiencing it only with Firefox and Brave, Chrome works fine. And he's getting an error in the console. See screenshot:

Screenshot

@giacomelli
Copy link

giacomelli commented Jun 27, 2022

Same here!

We have reports from our users with the same problem behavior, most of the reports are about Chrome.

I've tested it on my Windows machine and Chrome (103.0.5060.53) and it's happening with some videos:
image

@giacomelli
Copy link

From the messages is pretty clear that is something related to Google QUIC protocol.

When I disabled it on Chrome, the error stopped:
image

@rkrishnan8594
Copy link
Contributor

Thanks @giacomelli for providing a solution for this issue. We're aware of this as well and will investigate whether there are any ways to avoid this issue without changing Chrome settings.

@DiegoPiloni
Copy link

Thanks a lot @giacomelli !! We were having several user reports because of this and your solution seems to be working for all of them

@Hanley1
Copy link
Author

Hanley1 commented Jun 27, 2022

Thanks @giacomelli

This takes care of Brave as well since it's built with Chromium.

As for Firefox apparently they rolled out QUIC protocol in a recent update. It can be disabled by disabling http3: https://securityboulevard.com/2022/01/easy-firefox-fix-of-the-day-disable-http3/

@Hanley1
Copy link
Author

Hanley1 commented Jun 27, 2022

Well I take it back about Firefox. After disabling http3 my user is still experiencing this issue. Any ideas on how to prevent the error in Firefox?

@dario-santandrea
Copy link

Hi! Any update about this issue? I have a lot of angry customers because their videos won't play. Thanks!

@dario-santandrea
Copy link

In case anyone is interested.

We solved the problem using direct links to videos (https://vimeo.zendesk.com/hc/es/articles/224823567-Direct-links-to-video-files) via the vimeo API and loaded the video with the Plyr.io player (https://plyr.io/)

So far we have had no complaints from our customers 😄

@rkrishnan8594
Copy link
Contributor

Providing a followup to this issue - we've confirmed with one of our CDN partners that this error on video segment requests was caused by a recent Chrome update. We'll be in close communication with them about an expected resolution timeline (the fix for this will very likely not be on the Vimeo side).

In the interim, our recommendation is for users to switch browsers if they're encountering this issue.

@rkrishnan8594
Copy link
Contributor

We've confirmed with our CDN partner that this issue is now resolved.

@alexeevit
Copy link

alexeevit commented Jun 14, 2023

I ran into this issue the other day again. In my case it's not related to the QUIC protocol (no errors in console and I disabled the flag in chrome).
I implemented autoplay for modal windows — once the modal window is displayed (removed display: none), I initialize the player, wait until it's ready and play:

$('[data-name=demo-video]').on('showed', function(event) {
    var videoPlayer = new Vimeo.Player('demo-player');
    videoPlayer.ready().then(function() { videoPlayer.play(); });
});
  
$('[data-name=demo-video]').on('hidden', function(event) {
    var videoPlayer = new Vimeo.Player('demo-player');
    videoPlayer.ready().then(function() { videoPlayer.pause(); });
});

So sometimes (like every 10 time) it's playing the video but still displaying the loading spinner. Looks like some kind of race condition.

I tried to replace .ready() with .on('loaded') and it started appearing even more often.

What's interesting, I cannot reproduce it if I use adblock.

@rkrishnan8594
Copy link
Contributor

@alexeevit Thanks for the report. This sounds like a different issue than the one reported in this thread. Do you mind filing a new issue for this and including a JSFiddle or CodePen that we can use for reproduction?

@alexeevit
Copy link

@rkrishnan8594 Unfortunately, I cannot reproduce it in a clean environment. It seems that it conflicts with something on my website. Don't event know where to start, probably I should turn off all the external scripts and start connecting them 1 by 1.

@yrletter
Copy link

Similar issue:

https://native-2e3564-bdcdb6ca2f13f1fa287c207f4.webflow.io/directors/clara-aranovich-valdes

I have an ongoing issue in Webflow where the Vimeo loading spinner keeps appearing over videos that are autoplaying. It's hard to pinpoint as it only happens intermittently. Try clicking "play" on a few videos, usually it happens after a few. I have written custom js that keeps track of the vimeo videos and modal windows. Any ideas for how to troubleshoot?

@alexeevit
Copy link

Gotta say that in my case I use webflow as well

I ran into this issue the other day again. In my case it's not related to the QUIC protocol (no errors in console and I disabled the flag in chrome). I implemented autoplay for modal windows — once the modal window is displayed (removed display: none), I initialize the player, wait until it's ready and play:

$('[data-name=demo-video]').on('showed', function(event) {
    var videoPlayer = new Vimeo.Player('demo-player');
    videoPlayer.ready().then(function() { videoPlayer.play(); });
});
  
$('[data-name=demo-video]').on('hidden', function(event) {
    var videoPlayer = new Vimeo.Player('demo-player');
    videoPlayer.ready().then(function() { videoPlayer.pause(); });
});

So sometimes (like every 10 time) it's playing the video but still displaying the loading spinner. Looks like some kind of race condition.

I tried to replace .ready() with .on('loaded') and it started appearing even more often.

What's interesting, I cannot reproduce it if I use adblock.

@toddpadwick
Copy link

toddpadwick commented Jul 17, 2023

Hi @rkrishnan8594 . Unfortunately, we still seem to be experiencing this issue on, the latest Chrome release as of 17th July 2023: Version 114.0.5735.198 (Official Build) (x86_64).
We are running vimeo/player 2.20.1.

Screenshot 2023-07-17 at 12 24 46 (2)

@rkrishnan8594
Copy link
Contributor

@toddpadwick Are you seeing an ERR_QUIC_PROTOCOL_ERR in your console logs? If not, please file as a separate issue. And if it doesn't appear to be an issue with the Player.js SDK, please report this as an issue to Vimeo Support.

@rodox12
Copy link

rodox12 commented Aug 15, 2023

This issue isn't solved yet, it happens randomly for me... and nothing wrong shows in the console...
The Video keeps playing below the loading layer...

PS: already tried to disable the QUIC Protocol...

Screenshot from 2023-08-15 10-08-05

@brandonhrowe
Copy link
Contributor

@rodox12 Per the note above, please report this as a separate issue to Vimeo Support as this sounds different than the QUIC issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants