vue3使用video.js播放视频

Vue3中使用Video.js播放视频通常需要以下几个步骤：

1. **安装依赖**：
首先，你需要通过npm或yarn安装Video.js库及其插件。在项目目录下运行：

   npm install video.js videojs-contrib-hls videojs-contrib-media-source @vueuse/core
   # 或者使用yarn
   yarn add video.js videojs-contrib-hls videojs-contrib-media-source @vueuse/core

2. **引入并配置**：
在`main.js`或`.env.development.js`等全局文件中，导入Video.js，并创建一个实例：

   import Video from 'video.js/dist/video-js.min.css';
   import Vue from 'vue';
   import { useVideoPlayer } from '@vueuse/core';
   import videoConfig from './video-config';

   Vue.use(Video);

   const video = document.createElement('video');
   video.id = 'my-video-player';
   document.body.appendChild(video);

   const player = useVideoPlayer(video, videoConfig);

其中`video-config`是一个对象，包含Video.js的初始设置，如源URL、播放控制等。

3. **在组件中使用**：
在需要显示视频的组件里，你可以使用`player`对象来控制视频播放：

   <template>
     <div id="player-container">
       <button @click="playPause">Play/Pause</button>
       <!-- ...其他HTML元素... -->
     </div>
   </template>

   <script>
   export default {
     setup() {
       return {
         playPause: () => player.play().then(() => player.pause()),
         // ...其他生命周期钩子和数据...
       };
     },
   };
   </script>

4. **注意点**：
- 指定好视频源（HLS、MP4等），如果使用直播流可能还需要使用对应的插件支持（如`videojs-contrib-hls`）。
- 视频加载和播放可能需要处理一些异常情况，比如网络问题导致的错误。