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

【问题标题】：Wistia playback in react-player causes error "The XMLHttpRequeset constructor has been tampered with"react-player 中的 Wistia 播放导致错误“XMLHttpRequeset 构造函数已被篡改”
【发布时间】：2018-05-07 02:53:32
【问题描述】：

我有一个像这样嵌入的 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}
        />

网址明显指向 wistia，我在控制台中收到以下错误，播放器无法正常工作：

judy XMLHttpRequest 构造函数已被篡改。因为这会影响 CORS/Range XHR 请求，HLS 播放已被禁用。要启用 HLS 播放和其他重要功能，请删除更改 window.XMLHttpRequest 定义的代码。

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

【问题讨论】：

你能分享一个示例页面 url 看看发生了什么吗？

标签： reactjs xmlhttprequest http-live-streaming wistia

【解决方案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}
        />

修复它。

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

我不关注，您是说 wistia 链接不可公开访问，但将其与 youtube 网址进行比较？ wistia 链接是假的，但与我尝试使用的链接格式相同
您能否提供一个有效的 wistia 链接以表明它不适用于 wistia 链接？
codesandbox.io/s/43ok46r04x 链接有效。您可以尝试在codesandbox.io 上复制您的问题吗？组件是否显示Video not found. 错误？
我在codesandbox.io上没有问题，所以网站上肯定有其他问题。不知道是什么...
从codesandbox下载项目，部署到你的网站，看看它是否有效。如果是这样，请将其余代码添加到项目中，看看是什么代码破坏了它。