5

I have a ReactPlayer embded like so:

<ReactPlayer
          ref={this.ref}
          className="storyPlayer__reactPlayer"
          width="100%"
          height="100%"
          url="https://getleda.wistia.com/medias/bjz07hdxqx"
          playing
          onReady={() => {
            this.setState({ ready: true });
          }}
          onProgress={this.onProgress}
        />

Where the url is pointing at wistia obviously, I get the following error in the console and the player does not work:

judy The XMLHttpRequest constructor has been tampered with. Because this affects CORS/Range XHR requests, HLS playback has been disabled. To enable HLS playback and other important features, please remove code that changes the definition of window.XMLHttpRequest.

Any ideas what's causing this and how to fix?

sideshowbarker
  • 81,827
  • 26
  • 193
  • 197
meds
  • 21,699
  • 37
  • 163
  • 314

2 Answers2

1

Looks like the HLS issue was a redherring but if anyone is interested as to why I was getting it it's because of the routes configuration. For some reason it didn't like when the reactplayer was set up in a route such as /videoplayer, from the root it worked fine.

Upon further investigation the issue was actually quite simple, for whatever reason ReactPlayer doesn't know what '100%' width and height is for wistia videos, changing it to something like this:

  <ReactPlayer
          ref={this.ref}
          className="storyPlayer__reactPlayer"
          controls={true}
          **width="600px"
          height="600px"**
          url="https://getleda.wistia.com/medias/bjz07hdxqx"
          playing
          onReady={() => {
            this.setState({ ready: true });
          }}
          onProgress={this.onProgress}
        />

Fixed it.

meds
  • 21,699
  • 37
  • 163
  • 314
0

Your video url https://nanocorp.wistia.com/medias/dczbohg06v is not publicly accessible.

Switching to a publicly accessible video url would work:

<ReactPlayer url="https://youtu.be/nLF0n9SACd4" />

Edit v0kl4mv9rl

Roy Wang
  • 11,112
  • 2
  • 21
  • 42
  • I don't follow, you're saying the wistia link is not publically accessible but compare it to a youtube url? The wistia link is fake but follows the same format as the link I'm trying to use – meds May 11 '18 at 05:34
  • Can you provide a working wistia link to show that it's not working for wistia links? – Roy Wang May 11 '18 at 05:37
  • https://codesandbox.io/s/43ok46r04x the link works. Can you try to replicate your problem on https://codesandbox.io/? Does the component display a `Video not found.` error? – Roy Wang May 11 '18 at 05:50
  • I don't have the issue on codesandbox.io, so there must be something else going wrong here in the website. not sure what though... – meds May 11 '18 at 05:52
  • Download the project from codesandbox, deploy it to your website and see if it works. If it does, add the rest of your code to the project to see what code broke it. – Roy Wang May 11 '18 at 06:02
  • Yep it works, so must be something wrong somewhere in the rest of my code – meds May 11 '18 at 06:57