CODEWITHSUNDEEP
reactjsxmlhttprequesthttp-live-streamingwistia
meds
meds

Reputation: 22956

Wistia playback in react-player causes error "The XMLHttpRequeset constructor has been tampered with"

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?

Upvotes: 5

Views: 2480

Answers (2)

meds
meds

Reputation: 22956

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.

Upvotes: 1

Roy Wang
Roy Wang

Reputation: 11270

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

Upvotes: 0

Related Questions