如何在Vue3中使用视频库Video.js实现视频播放？

<template>
  <div class="video-container">
    <video
      ref="videoPlayer"
      class="video-js vjs-default-skin"
      controls
      preload="auto"
      width="640"
      height="264"
      data-setup="{}"
    >
      <source :src="videoSource" type="video/mp4" />
      <!-- 其他可能的源 -->
    </video>
  </div>
</template>
 
<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
 
export default {
  name: 'VideoPlayerComponent',
  data() {
    return {
      videoSource: 'path/to/your/video.mp4',
    };
  },
  mounted() {
    this.player = videojs(this.$refs.videoPlayer, this.videoOptions, function onPlayerReady() {
      console.log('Player is ready');
    });
  },
  beforeUnmount() {
    if (this.player) {
      this.player.dispose();
    }
  }
};
</script>
 
<style>
.video-container {
  /* 样式代码 */
}
.video-js .vjs-big-play-button {
  /* 自定义播放按钮的样式 */
}
</style>

在这个例子中，我们首先导入了Video.js库，并包含了它的CSS。然后，在模板部分，我们使用video标签定义了视频播放器，并通过ref属性为它设置了一个引用，以便我们可以在Vue的生命周期钩子中初始化Video.js播放器实例。在mounted钩子中，我们调用videojs()函数来创建播放器实例，并传入我们通过$refs获取的DOM元素以及一些配置选项。最后，在组件销毁之前，我们在beforeUnmount钩子中处理播放器的清理工作。