How to add videojs event listener?-CodePudding

I add videojs player to my VUE app and I have no idea how to add event listener to it. I need to track when player starts playing and stop or pause. I can't find anything related to it, the documentation doesn't provide this. Here is how my setup looks like according to docs

this.player = videojs(this.$refs.videoPlayer, this.options, () => {
    this.player.log('onPlayerReady', this);
})

CodePudding user response：

Alright, this is just

this.player.on('play', () => {
    this.play()
})
this.player.on('pause', () => {
    this.stop()
})

CodePudding user response：

VideoJS uses the HTML5 <video> element, so you can just use the events associated with that element.

Example:

document.querySelector(".video").addEventListener("play", (e) => {
  console.log("playing...");
});

document.querySelector(".video").addEventListener("pause", (e) => {
  console.log("paused...");
});

<link href="https://vjs.zencdn.net/7.20.1/video-js.css" rel="stylesheet" />
<script src="https://vjs.zencdn.net/7.20.1/video.min.js"></script>

<video  controls preload="auto" width="640" height="268" data-setup='{ "playbackRates": [0.5, 1, 1.5, 2],"loopbutton": true  }'>
  <source src="http://vjs.zencdn.net/v/oceans.mp4" type='video/mp4'>
  <source src="http://vjs.zencdn.net/v/oceans.webm" type='video/webm'>
</video>