4

我有一个像这样嵌入的 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 定义的代码。

任何想法是什么导致了这种情况以及如何解决？

4

2 回答 2

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

修复。

于 2018-05-11T07:21:30.603 回答
0

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

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

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

编辑 v0kl4mv9rl

于 2018-05-10T15:44:00.483 回答