Video.js and React Guide

[misteroneill]

We should write a guide for using Video.js and React and add it to the FAQ. This topic has come up multiple times.

[kocoten1992]

Any plan for vue js 👍 ?

[misteroneill]

Maybe. If it seems to be popular enough. But I would imagine many of the principles carry across frameworks. It's all the DOM in the end.

[gkatsev]

If someone were to write such a guide, we'd definitely be interested but the core team isn't really familiar with vuejs at the moment.

[revolunet]

here's a basic react implementation.

import React from 'react';
import ReactDOM from 'react-dom';

import videojs from 'video.js'
require('!style-loader!css-loader!video.js/dist/video-js.css')

class VideoPlayer extends React.Component {
  componentDidMount() {
    // see https://github.com/videojs/video.js/blob/master/docs/guides/options.md
    const options = {
      sources: [{
        src: '/path/to/video.mp4',
        type: 'video/mp4'
      }]
    }

    const videoNode = ReactDOM.findDOMNode(this).querySelector('video');

    this.player = videojs(videoNode, options, function onPlayerReady() {
      console.log('onPlayerReady', this)
    });

  }
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose()
    }
  }
  render() {
    return (
      <div data-vjs-player>
        <video className="video-js"></video>
      </div>
    )
  }
}

[gkatsev]

We have a version of one.