hamishrouse/README.md

## README.md

      
    Raw
  

              README.md
            
          
    VideoJS, React and Typescript

WARNING: A work in progress, this is a first attempt at getting VideoJs working in a Typescript and React Enviroment.
This was inspired from the VideoJS React Tutorial - (see also Brightcover Player with React and Typescript)
Prerequistes
Using TypeScript-React-Starter: https://github.com/Microsoft/TypeScript-React-Starter
Then npm install packages
npm i --save video.js
npm i --save-dev @types/video.js

Have any suggestions/improvements? Give me a shout in the comments :)

  
## VideojsPlayer.tsx
import * as React from 'react';
import videojs from 'video.js';

// Styles
import 'video.js/dist/video-js.css';

interface VideoPlayerPropsInferface {
  videoJsOptions: videojs.PlayerOptions;
}

export default class VideoPlayer extends React.Component {
  private player?: videojs.Player;
  private videoNode?: HTMLVideoElement;

  constructor(props: VideoPlayerPropsInferface) {
    super(props);
    this.player = undefined;
    this.videoNode = undefined;
  }

  componentDidMount() {

    // instantiate video.js
    this.player = videojs(this.videoNode, this.props).ready(function() {
      // console.log('onPlayerReady', this);
    });
  }

  // destroy player on unmount
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }

  // wrap the player in a div with a `data-vjs-player` attribute
  // so videojs won't create additional wrapper in the DOM
  // see https://github.com/videojs/video.js/pull/3856
  render() {
    return (
      <div className="c-player">
        <div className="c-player__screen" data-vjs-player="true">
          <video ref={(node: HTMLVideoElement) => this.videoNode = node} className="video-js" />
        </div>
        <div className="c-player__controls">
          <button>Play</button>
          <button>Pause</button>
        </div>
      </div>
    );
  }
}

## VideojsReactTypescript.tsx
import * as React from 'react';
import VideoPlayer from './VideojsPlayer';

// Styles
import './App.css';

const logo = require('./logo.svg');

const videoJsOptions = {
  autoplay: true,
  controls: true,
  sources: [{
    src: 'http://vjs.zencdn.net/v/oceans.mp4',
    type: 'video/mp4'
  }]
};

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <VideoPlayer {...videoJsOptions} />
      </div>
    );
  }
}

export default App;
	import * as React from 'react';
	import videojs from 'video.js';

	// Styles
	import 'video.js/dist/video-js.css';

	interface VideoPlayerPropsInferface {
	videoJsOptions: videojs.PlayerOptions;
	}

	export default class VideoPlayer extends React.Component {
	private player?: videojs.Player;
	private videoNode?: HTMLVideoElement;

	constructor(props: VideoPlayerPropsInferface) {
	super(props);
	this.player = undefined;
	this.videoNode = undefined;
	}

	componentDidMount() {

	// instantiate video.js
	this.player = videojs(this.videoNode, this.props).ready(function() {
	// console.log('onPlayerReady', this);
	});
	}

	// destroy player on unmount
	componentWillUnmount() {
	if (this.player) {
	this.player.dispose();
	}
	}

	// wrap the player in a div with a `data-vjs-player` attribute
	// so videojs won't create additional wrapper in the DOM
	// see https://github.com/videojs/video.js/pull/3856
	render() {
	return (
	<div className="c-player">
	<div className="c-player__screen" data-vjs-player="true">
	<video ref={(node: HTMLVideoElement) => this.videoNode = node} className="video-js" />
	</div>
	<div className="c-player__controls">
	<button>Play</button>
	<button>Pause</button>
	</div>
	</div>
	);
	}
	}
	import * as React from 'react';
	import VideoPlayer from './VideojsPlayer';

	// Styles
	import './App.css';

	const logo = require('./logo.svg');

	const videoJsOptions = {
	autoplay: true,
	controls: true,
	sources: [{
	src: 'http://vjs.zencdn.net/v/oceans.mp4',
	type: 'video/mp4'
	}]
	};

	class App extends React.Component {
	render() {
	return (
	<div className="App">
	<VideoPlayer {...videoJsOptions} />
	</div>
	);
	}
	}

	export default App;