search

cookpete / react-player

A React component for playing a variety of URLs, including file paths, YouTube, Facebook, Twitch, SoundCloud, Streamable, Vimeo, Wistia and DailyMotion
https://cookpete.github.io/react-player
MIT License
9.36k stars 1.15k forks source link

Vimeo player not working #690

Closed artemkhalygov closed 5 years ago

artemkhalygov commented 5 years ago

Current Behavior

Vimeo Player not working

For example I have this code <ReactPlayer url='https://vimeo.com/243556536' playing />

And it's not working I got error

Uncaught (in promise) TypeError: Cannot read property 'Player' of undefined

in file Vimeo.js on this place

this.player = new Vimeo.Player

Environment

readeral commented 5 years ago

Check your network tab, is the 'getSDK' request returning player.js successfully? IT's the one with the request URL of https://player.vimeo.com/api/player.js. The error suggests that Vimeo is undefined, meaning the promise of the API call is not being fulfilled.

readeral commented 5 years ago

I've just tested your video URL in my new application (just started a few hours ago) and it works fine for me with Chrome version 76.0.3809.100.

artemkhalygov commented 5 years ago

Thanks for answer.

Request URL: https://player.vimeo.com/api/player.js Request Method: GET Status Code: 200 OK

Everything is OK with SDK

Also, I checked Firefox and have same issue.

artemkhalygov commented 5 years ago

If I embded this script on page <script type="text/javascript" charset="utf8" async="" src="https://player.vimeo.com/api/player.js"></script>

Everything works as expected

readeral commented 5 years ago

Yeah so it suggests that whatever is happening, the script isn't loading on your site by way of the react-player component. Is it possible that the request for the script is resolving after the component has initialised and is trying to access that Vimeo method? A codepen/codesandbox reproduction would be helpful at this point.

readeral commented 5 years ago

Any progress on this @artemkhalygov?

artemkhalygov commented 5 years ago

@readeral Yes, I found problem.

It's issue with Mailchimp embed form. In unknown reason they added their custom .define property to window object.

So when Vimeo player is loading it checking if .define property is available and if yes - trying to load script using it.

Sorry for disturbing - no problem with current library.

Thanks.

readeral commented 5 years ago

Wow that’s awful from Mailchimp!

Glad you found the solution!

On Wed, 14 Aug 2019 at 8:41 pm, Artem Khlaygov notifications@github.com wrote:

@readeral https://github.com/readeral Yes, I found problem.

It's issue with Mailchimp embed form. In unknown reason they added their custom .define property to window object.

So when Vimeo player is loading it checking if .define property is available and if yes - trying to load script using it.

Sorry for disturbing - no problem with current library.

Thanks.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/CookPete/react-player/issues/690?email_source=notifications&email_token=ADZK3CEBFUMJRTENIS3IBQLQEPON7A5CNFSM4ILABKLKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD4IM53Y#issuecomment-521195247, or mute the thread https://github.com/notifications/unsubscribe-auth/ADZK3CDTDXA4THHJL3GO5KLQEPON7ANCNFSM4ILABKLA .

--

Alan Reader| e. areader0@gmail.com areader0@gmail.com | m. 0400 215 751 | fb. - readeral http://www.facebook.com/readeral | i. - instagram.com/readeral http://instagram.com/readeral

oleksandrbyk commented 3 years ago

Current Behavior

Vimeo Player not working

For example I have this code <ReactPlayer url='https://vimeo.com/243556536' playing />

And it's not working I got error

Uncaught (in promise) TypeError: Cannot read property 'Player' of undefined

in file Vimeo.js on this place

this.player = new Vimeo.Player

Environment

I faced the issue as well on my React project.

TypeError: Cannot read property 'Player' of null
    at Vimeo.js:103

React-player version on my project was 2.6.2... I found the reason why I got the issue. Vimeo.js version that React-player is importing is 2.14.1 that causing above issue.(You can check network tab on chrome developer tool by filtering 'vimeo'. A workaround for this issue was to embed import script on your index.html to import vimeo JS LTS version(3.24.8).

oleksandrbyk commented 3 years ago

It may be an issue on react-player package, @readeral

cookpete commented 3 years ago

@oleksandrbyk This is a quirk with the Vimeo player API and nothing to do with ReactPlayer.

More info and related issues at https://github.com/cookpete/react-player/issues/921#issuecomment-641144142