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

Question

我正在尝试将视频加载到 React 项目中的 VideoJS 播放器中。该视频是 return 从 Web 服务编辑的，该服务采用特定的令牌来验证用户。

假设视频是从下面的 API 调用return编辑的：

localhost:8080/video/1/

要播放此视频，用户应该经过身份验证。也就是说，API取下面header到return一个成功的结果：

auth: token

我的 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 的令牌并将其传递给请求 header？

Answer 1

我会将此组件作为另一个组件的子组件，该组件的唯一职责是进行 API 调用并在用户获得授权时呈现 VideoComponent。沿着这些路线。

如果用户未获得授权，您可能需要某种类型的重定向或错误消息反馈给用户。我没有将其合并到我的代码片段中。

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>
    }
}

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

Passing header parameters while loading Video in VideoJs

reactjs

xmlhttprequest

video.js

request-headers