Question

我正在开发一个应用程序，其中服务器流一些视频文件，并且基于ReactJS的客户端可以使用react-player播放该流。

当我使用来自ReactPlayer组件的普通url变量播放流时，一切都很好。但是现在我需要在标头中传递一些数据（授权令牌）以及请求以访问流。

理想情况是使用Fetch API以某种方式向流发出请求，然后仅将视频数据绕过ReactPlayer组件，但我不确定是否可能。

react-player支持这种情况吗？如果没有，我该如何实现？或者我可以使用其他任何支持自定义请求制作的通用视频播放器吗？

如果这很重要，则后端服务器是基于Flask的REST api应用程序。

Answer 1

我使用的解决方案是在加载流时修改HLS发送的XHR请求。通过为ReactPlayer组件提供hls选项：

          <ReactPlayer
              config={{
                file: {
                  hlsOptions: {
                    forceHLS: true,
                    debug: false,
                    xhrSetup: function(xhr, url) {
                      if (needsAuth(url)) {
                        xhr.setRequestHeader('Authorization', getToken())
                      }
                    },
                  },
                },
              }}
            />

hls的选项列表可用here。

根据this github issue，您可以使用react-player版1.1.2以来的版本

反应玩家和授权所需的问题

1 个答案: