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

您的视频 url https://nanocorp.wistia.com/medias/dczbohg06v 无法公开访问。

切换到可公开访问的视频url 可行：

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

Answer 2

看起来 HLS 问题是一个误导，但如果有人对我得到它的原因感兴趣，那是因为路由配置。出于某种原因，它不喜欢将 reactplayer 设置在 /videoplayer 等路径中，从根开始它工作正常。

经过进一步调查，问题实际上很简单，无论出于何种原因，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}
        />

已修复。

React-Player 中的 Wistia 播放导致错误 "The XMLHttpRequeset constructor has been tampered with"

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

xmlhttprequest

http-live-streaming

reactjs

wistia