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.

Sign up for GitHub

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

Jump to bottom

Uncaught (in promise) Error: Failed to load file://connect.facebook.net/en_US/sdk.js #728

Closed
jordiblanchcarles opened this issue Oct 17, 2019 · 2 comments
Closed

Uncaught (in promise) Error: Failed to load file://connect.facebook.net/en_US/sdk.js #728

jordiblanchcarles opened this issue Oct 17, 2019 · 2 comments

Comments

@jordiblanchcarles
Copy link

Current Behavior

When trying to use the standalone version of ReactPlayer to play a Facebook video, I get the following error:

Uncaught (in promise) Error: Failed to load file://connect.facebook.net/en_US/sdk.js

Expected Behavior

I expected the player to play correctly the video as it does with Youtube videos.

Steps to Reproduce

Just try to create this index.html file and open with browser:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <!--meta http-equiv="Content-Security-Policy" content="default-src 'self' *;"-->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script src='https://unpkg.com/react-player/dist/ReactPlayer.standalone.js'></script>
</head>

<body>
  <main class="content">
    <div id='container'></div>
    <button onClick='javascript: playPlayer()'>Play</button>
    <button onClick='javascript: pausePlayer()'>Pause</button>
  </main>

  <script>
    const url = 'https://www.facebook.com/cityad.cat/videos/2490763814533920/'
    const container = document.getElementById('container')

    window.playPlayer = function () {
      renderReactPlayer(container, {
        url,
        playing: true
      })
    }

    window.pausePlayer = function () {
      const url = ''
      renderReactPlayer(container, {
        url,
        playing: false
      })
    }

    playPlayer()
  </script>
</body>

</html>

Environment

Other Information
@cookpete
Copy link
Owner

The Facebook player loads the SDK from here:

https://github.com/CookPete/react-player/blob/1e41ce5ce5e2d6946701723f60e74326385df92d/src/players/Facebook.js#L6

which will load it based on the protocol of the page you are currently on. If you are loading the player on a local file it will attempt to use file:// (as seen in your error log) and fail.

Try manually loading the SDK yourself before the player, by adding the SDK before the standalone script, eg:

<script src='https://connect.facebook.net/en_US/sdk.js'></script>
<script src='https://unpkg.com/react-player/dist/ReactPlayer.standalone.js'></script>

See if that helps?

@jordiblanchcarles
Copy link
Author

Hello,

thank you for your answer. Your solution works, but why not force loading the SDK directly from https instead of the local page protocol?

const SDK_URL = 'https://connect.facebook.net/en_US/sdk.js'

albanqoku added a commit to albanqoku/react-player that referenced this issue Feb 24, 2021
@albanqoku
Use https SDK urls by default
7c8991e 
Fixes cookpete/react-player#728
Webmaster1116 added a commit to Webmaster1116/video-player that referenced this issue May 20, 2021
@Webmaster1116
Use https SDK urls by default
96dc76c 
Fixes cookpete/react-player#728
webmiraclepro added a commit to webmiraclepro/video-player that referenced this issue Sep 9, 2022
@webmiraclepro
Use https SDK urls by default
f923feb 
Fixes cookpete/react-player#728
philip-luther added a commit to philip-luther/react-player that referenced this issue Nov 22, 2024
@philip-luther
Use https SDK urls by default
79e5699 
Fixes cookpete/react-player#728
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@cookpete @jordiblanchcarles