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

问题描述

我正在尝试在React项目中将视频加载到VideoJS Player中。视频是从Web服务返回的，带有特定令牌，可对用户进行身份验证。

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

localhost：8080 / video / 1 /

为了播放此视频，应验证用户身份。换句话说，API使用以下标头返回成功的结果：

auth：令牌

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

解决方法

我会将这个组件作为另一个组件的子组件，如果用户被授权，则该组件的唯一责任是进行API调用并呈现$file_name = "app-release.apk"; $file_ext = "apk"; $file_path = 'my/app/folder/' . $file_name; header("Cache-Control: public"); header("Content-description: File Transfer"); $contenttype = "application/com.android.package-install"; header("Content-Type: " . $contenttype); header("Content-Disposition: attachment; filename=\"".$file_path."\""); header("Content-Tranfer-Encoding: binary"); readfile($file_path); 。遵循这些原则。

如果未授权用户，则可能需要某种类型的重定向或错误消息反馈给用户。我没有将其纳入代码段。

VideoComponent