안녕하세요.
지난 주말에 오도르모의 솔로 캠핑을 갔다.streampack팀의 민수입니다.

개요

React에서 애니메이션 플레이어의 JS 라이브러리 비디오입니다.js를 실현하려고 시도하다.
https://github.com/videojs/video.js
이번 환경은 이 보도의 환경을 유용하였다.
https://qiita.com/minsu/items/0ccbafff460e72b13d44

설치

우선 npm, yarn, 비디오입니다.js 패키지를 추가합니다.

$ yarn add video.js

인코딩

React 설치 방법은 비디오입니다.jsdocument에 기재되어 있습니다. 이것을 참고하여 아래와 같이 실현해 보십시오.
https://docs.videojs.com/tutorial-react.html
다음과 같이 js 파일을 만듭니다.

app/javascript/components
  ├ VideoPlayer.js
  └ VideoTest.js

VideoPlayer.js

import React from "react"
import videojs from 'video.js'
import "video.js/dist/video-js.css"

export default class VideoPlayer extends React.Component {
  componentDidMount() {
    // instantiate Video.js
    this.player = videojs(this.videoNode, this.props.options, function onPlayerReady() {
      console.log('onPlayerReady', this)
    });
  }

  componentWillUnmount() {
    if (this.player) {
      this.player.dispose()
    }
  }

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

video.js의plugins를 사용할 때
componentDidMount () onPlayerReady () {} 내에서 적응하면 됩니다.

export default class VideoPlayer extends React.Component {
  componentDidMount() {
  this.player = videojs(this.videoNode, this.props.options, function onPlayerReady() {
    console.log('onPlayerReady', this)
    const player = this
    player.someplugin({
      ~~~
    })
  })
}

VideoTest.js

import React from "react"
import VideoPlayer from './VideoPlayer'

export default class VideoTest extends React.Component {
  render(){
    const videoJsOptions = {
      autoplay: true,
      controls: true,
      sources: [{
        src: 'http://www.example.com/path/to/video.mp4',
        type: 'video/mp4'
      }]
    }

    return(
      <div>
        <h1>test video</h1>
        <VideoPlayer 
          options={videoJsOptions}
        />
      </div>
    )
  }
}

제가 실제로 보여 드릴게요.
test.html.haml

= react_component 'VideoTest'

동작 확인

참고 자료

https://github.com/videojs/video.js
https://docs.videojs.com/tutorial-react.html

관련 비디오

(c)copyright 2008、Blender Foundation/ www.bigbuckbunny.org