player.watermark is not a function

[bansalvedant]

I am trying to use the videojs-watermark npm module but the error which I am getting is - TypeError: player.watermark is not a function.

The code is as follows -

import React, { Component } from 'react';
import videojs from 'video.js';
import 'videojs-watermark';

class App extends Component {
componentDidMount(){
const player = videojs('my-player');
player.watermark({
file: 'watermark.png',
xpos: 50,
ypos: 50,
xrepeat: 0,
opacity: 0.5,
})
}

render() {
return (

<video
id="my-player"
class="video-js"
controls
preload="auto"
poster="//vjs.zencdn.net/v/oceans.png"
data-setup='{}'

  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg"></source>
  <p class="vjs-no-js">
    To view this video please enable JavaScript, and consider upgrading to a
    web browser that
    <a href="http://videojs.com/html5-video-support/" target="_blank">
      supports HTML5 video
    </a>
  </p>
</video>
<script>
  
</script>
  </div>
);

}
}

export default App;