reactjs - react 播放器和授权需要问题

Question

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

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

理想情况下是使用 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 .

您可以从 react-player 开始使用它版本 1.1.2根据 this github issue