3

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

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

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

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

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

4

2 回答 2

3

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

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

此处提供了 hls 的选项列表。

您可以 根据此 github 问题react-player使用此 版本1.1.2

于 2019-01-27T12:15:18.673 回答
0

我花了几个小时才终于找到了这个惊人的答案。它对我有用，因为我需要在授权道具上传递令牌。

如果您的文件服务器支持 CORS，您可以使用 fetch 和URL.createObjectURL

const token = getUserToken();
const CustomVideo = ({ videoUrl }) => {
    const options = {
        headers: {
            Authorization: `Bearer ${token}`
        }
    }
    const [url, setUrl] = useState()
    useEffect(() => {
        fetch(videoUrl, options)
        .then(response => response.blob())
            .then(blob => {
            setUrl(URL.createObjectURL(blob))
            
        });
    }, [videoUrl])
   
    
    return (
        <ReactPlayer url={url} width="100%"  controls />
    )
}

在此处查看详细信息：https ://github.com/CookPete/react-player/issues/282

于 2021-10-07T19:36:49.263 回答