vue-video-player实现监控

以下是使用vue-video-player实现监控的步骤：

1. 首先安装vue-video-player，可以使用以下命令进行安装：

npm install vue-video-player --save

2. 在Vue组件中引入vue-video-player：

import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
Vue.use(VueVideoPlayer)

3. 在Vue组件中使用vue-video-player：

<template>
  <div>
    <video-player ref="player" :options="playerOptions" @play="onPlayerPlay($event)"></video-player>
  </div>
</template>

<script>
export default {
  data() {
    return {
      playerOptions: {
        autoplay: true,
        muted: true,
        controls: true,
        sources: [{
          type: 'rtmp/mp4',
          src: 'rtmp://your-rtmp-url'
        }]
      }
    }
  },
  methods: {
    onPlayerPlay(player) {
      console.log('player play!', player)
    }
  }
}
</script>

在上述代码中，我们使用了vue-video-player组件，并设置了一些选项，例如自动播放、静音、控制条等。我们还设置了视频源，这里使用了rtmp协议的视频流。最后，我们在方法中监听了播放事件，并在控制台输出了一条信息。