Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

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>
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>
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????
                @MarksCode yeah you can just save overlay plugin in your project and import it.  import overlay from './plugins/videojs-overlay' and other code runs well.
– Bijay Rai
                Jul 16, 2018 at 3:25
Install the plugin: npm i videojs-overlay --save
Import the package in Player class : import overlay from 'videojs-overlay';
Register the plugin before instantiating the player: videojs.registerPlugin('overlay', overlay);
Then, player.overlay({... will work as intended.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.