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

修复。

Answer 2

您的视频网址https://nanocorp.wistia.com/medias/dczbohg06v不可公开访问。

切换到可公开访问的视频网址将起作用：

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