在 VideoJs 中加载视频时传递标头参数

Question

我正在尝试将视频加载到 React 项目中的 VideoJS 播放器中。视频是从一个 Web 服务返回的，该服务采用对用户进行身份验证的特定令牌。

假设视频是从以下 API 调用返回的：

localhost:8080/video/1/

要播放此视频，用户必须经过身份验证。换句话说，API 采用以下标头来返回成功的结果：

身份验证：令牌

我的 VideoJs 播放器内置在 React 组件中，如下所示：

import React from 'react'
import videojs from 'video.js'

export default class VideoComponent extends React.Component {

  componentDidMount () {
      this.videoJsOptions = {
        sources: [{
           src: 'http://localhost:8080/video/1/',
          type: 'video/mp4',
        }],
      }
      let player = videojs(this.videoNode, this.videoJsOptions, function onPlayerReady() {
        console.log('onPlayerReady', this)
      })

      this.player = player
  }
  render () {
      return (
            <div data-vjs-player>
              <video ref={node => this.videoNode = node} className="video-js"></video>
            </div>
      )       
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

如何让我的视频组件获取调用 URL 的令牌并将请求标头传递给它？

Answer 1

如果用户被授权，我会将这个组件作为另一个组件的子组件，该组件的唯一职责是进行 API 调用并呈现 VideoComponent。类似的东西。

如果用户未经授权，您可能希望向用户提供某种类型的重定向或错误消息反馈。我没有在我的代码 sn-p 中加入它。

export default class VideoAuth extends React.Component {
    state = {
        isAuthorized: false
    }

    async componentDidMount() {
        const authRequest = await someAuthRequest()
        if (authRequest.ok) {// or however the data structure looks like
            this.setState({ isAuthenticated: true })
        }
    }

    render() {
        return this.state.isAuthenticated ? <VideoComponent /> : <div> Authorizing... </div>
    }
}