use videojs plugins in react Video JS

Question

As doc mentioned I ve initialized video js in react by doing something like this ...

    import React from 'react';
    import videojs from 'video.js'

    export default class VideoPlayer extends React.Component {
      componentDidMount() {
        // instantiate video.js
        this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
          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 data-vjs-player>
            <video ref={ node => this.videoNode = node } className="video-js"></video>
          </div>
        )
      }
    }

I want to integrate VideoJs Overlay plugin in this... so i ve done something like this...

import React from 'react';
import videojs from 'video.js'

export default class VideoPlayer extends React.Component {
  componentDidMount() {
    // instantiate video.js
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {

player.overlay({
            content: 'Default overlay content',
            debug: true,
            overlays: [{
              content: 'The video is playing!',
              start: 'play',
              end: 'pause'
            }, {
              start: 0,
              end: 15,
              align: 'bottom-left'
            }, {
              start: 15,
              end: 30,
              align: 'bottom'
            }, {
              start: 30,
              end: 45,
              align: 'bottom-right'
            }, {
              start: 20,
              end: 'pause'
            }]
          });
            });
      }

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

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

While doing this it give me error like player.overlay is not function...

and if i do videojs.registerPlugin('overlay', overlay);

and call overlay function it gives me error like component Overlay is undefined

How to workout videojs plugins in react way????

Answer 1

You need to import videojs-overlay package before you use it. Follow these steps :

1. Install the plugin: npm i videojs-overlay --save
2. Import the package in Player class : import overlay from 'videojs-overlay';
3. Register the plugin before instantiating the player: videojs.registerPlugin('overlay', overlay);

Then, player.overlay({... will work as intended.