如何添加 videojs 事件监听器？

Question

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);
})

Answer 1

Alright, this is just

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

Answer 2

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 class="video-js 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>