reactjs - 在react-player中播放Wistia会导致错误 "The XMLHttpRequeset constructor has been tampered with"

Question

我嵌入了一个 ReactPlayer，如下所示:

<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}
        />

当 url 明显指向 wistia 时，我在控制台中收到以下错误，并且播放器无法工作:

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.

有什么想法导致此问题以及如何解决吗？

Answer 1

看起来 HLS 问题是一个红鲱鱼，但如果有人对我为什么得到它感兴趣，那是因为路由配置。由于某种原因，它不喜欢在/videoplayer 等路径中设置 ReactPlayer，但从根本上来说它工作得很好。

经过进一步调查，问题实际上非常简单，无论出于何种原因，ReactPlayer 不知道 wistia 视频的“100%”宽度和高度是什么，将其更改为如下所示:

  <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}
        />

已修复。