在react-player中播放Wistia会导致错误“XMLHttpRequeset构造函数已被篡改”

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 XMLHttpRequest 构造函数已被篡改。由于这会影响 CORS/Range XHR 请求，因此已禁用 HLS 播放。要启用 HLS 播放和其他重要功能，请删除更改 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}
        />

修复。