Блог

Я пытаюсь загрузить видео в VideoJS Player в проекте react. Видео возвращается из веб-службы, использующей определенный токен, который аутентифицирует пользователя.

Допустим, видео возвращается из приведенного ниже вызова API:

локальный хостинг: 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-адреса и передавать ему заголовок запроса?

Я бы поставил этот компонент дочерним по отношению к другому компоненту, единственной обязанностью которого является выполнение вызова 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>
    }
}