vue-video-player 中 fullscreenchange事件

在`vue-video-player`中，可以通过监听`fullscreenchange`事件来监测全屏状态的变化。具体的代码示例如下：

<template>
  <div>
    <video-player ref="videoPlayer" :options="playerOptions"></video-player>
  </div>
</template>

<script>
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

export default {
  components: {
    VideoPlayer
  },
  data() {
    return {
      playerOptions: {
        // 视频源
        sources: [
          {
            src: 'your-video-url',
            type: 'video/mp4'
          }
        ]
      }
    }
  },
  mounted() {
    // 监听 fullscreenchange 事件
    this.$refs.videoPlayer.$refs.video.addEventListener('fullscreenchange', this.handleFullscreenChange)
  },
  methods: {
    // 处理全屏状态变化
    handleFullscreenChange() {
      const isFullscreen = document.fullscreenElement !== null
      console.log('全屏状态变化：', isFullscreen)
      // 在这里可以根据全屏状态进行相应的操作
    }
  }
}
</script>

在上述代码中，我们使用了`vue-video-player`组件，并在其中监听`fullscreenchange`事件。当全屏状态发生变化时，会触发`handleFullscreenChange`方法。你可以根据实际需求，在该方法中执行相应的操作。

请注意，你需要将`your-video-url`替换为你自己的视频地址。