Typescript, React and Video.js (VideoJS)

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;

Thanks for your contribution! - This looks really useful, as I want to use video.js in my typescript/react project.

Following the instructions, I did the npm installs:

npm i --save video.js
npm i --save-dev @types/video.js

I pasted your code verbatim into a file VideojsPlayer.tsx in my project, but Visual Studio Code croaks at line 24:

this.player = videojs(this.videoNode, this.props).ready(function() {

with error message:

Argument of type 'Readonly<{ children?: ReactNode; }> & Readonly<{}>' is not assignable to parameter of type 'VideoJsPlayerOptions'.
  Types of property 'children' are incompatible.
    Type 'ReactNode' is not assignable to type 'Child[]'.
      Type 'string' is not assignable to type 'Child[]'.

Sorry if I'm being stupid - do you have any suggestions what I've done wrong or how to fix it?

You can fix the issue by specifying the videoJsOptions prop as the second parameter of videojs() :

this.player = videojs(this.videoNode, this.props.videoJsOptions).ready(function() {

Also, on line 22 at VideojsReactTypescript.tsx there's going to be an issue when trying to pass the spread of videoJsOptions as the prop values, instead of referencing it as {...videoJsOptions} you can state it directly as an object like this:

<VideoPlayer videoJsOptions={videoJsOptions}/>

I know this thread is kinda old, but hope it helps anyone that stumbles upon this thread 🐳

Hi, Thanks a lot.. I could not find a better implementation in typescript anywhere.
But could you also please show how to show markers on the video with "videojs-markers" package. Please I am desperate

Hi @MohammedAK1991 - i haven’t played with the video js markers package and have limited capacity at this time

Hi @hamishrouse
I cant seem to get this to work with video.js 8.* :(
Does this only work with video.js 7.*?