video-js与video.js在vue3中安装与使用

在Vue 3中安装和使用video.js与video-js，你可以按照以下步骤进行操作：

1. 首先，打开终端并导航到你的Vue项目目录下。

2. 运行以下命令来安装video.js和videojs-contrib-hls插件：

npm install video.js videojs-contrib-hls

3. 在Vue组件中引入video.js和videojs-contrib-hls：

import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import 'videojs-contrib-hls';

export default {
  mounted() {
    // 在这里初始化视频播放器
  },
};

4. 在mounted钩子函数中初始化视频播放器：

mounted() {
  this.player = videojs(this.$refs.videoPlayer, {
    // 配置选项
    // 可以根据需要进行配置，例如设置视频源等
    // 更多配置选项请参考video.js文档
  });
},

5. 在Vue模板中添加一个带有ref属性的div元素作为视频播放器的容器：

<template>
  <div>
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>

6. 最后，确保在组件销毁时销毁视频播放器以释放资源：

beforeUnmount() {
  if (this.player) {
    this.player.dispose();
  }
},

现在，你可以根据需要进行进一步的配置和使用video-js来播放视频了。记得根据自己的需求，修改视频源等配置选项。希望这可以帮助到你！