vue3 使用videojs-player 监听事件获取当前播放时间

在 Vue3 中，使用 `videojs-player` 需要先安装并引入库，然后通过组件实例来监听视频播放事件。以下是一个基本的例子：

1. 安装 `videojs-player` 和可能需要的其他依赖：

npm install video.js videojs-contrib-media-sources @vueuse/core

2. 在你的组件中导入并创建 VideoPlayer 组件，并绑定了到 `ref` 以便于后续操作：

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

<script setup>
import { ref } from 'vue';
import VideoJSPlayer from 'vue-videojs-player';

const playerOptions = {
  // 其他选项...
};

const mediaPlayer = ref(null);
</script>

3. 使用 `setup` 钩子来监听 `timeupdate` 或其他需要的事件，并获取当前播放时间：

import { onMounted } from 'vue';

onMounted(() => {
  const handleTimeUpdate = () => {
    const currentTime = mediaPlayer.value.currentTime();
    console.log('当前播放时间:', currentTime);
  };

  mediaPlayer.value.on('timeupdate', handleTimeUpdate);
});

4. 当组件销毁时，记得移除事件监听以避免内存泄漏：

onUnmounted(() => {
  mediaPlayer.value.off('timeupdate', handleTimeUpdate);
});