vue2 使用 vue-video-player

Vue2中使用vue-video-player是一个用于在Vue应用中嵌入视频播放功能的轻量级库。它允许你轻松地添加视频播放控件，并支持常见的视频播放事件处理。要在项目中集成`vue-video-player`，你需要按照以下步骤操作：

1. **安装依赖**:
首先，在你的项目目录下运行`npm install vue-video-player` 或者 `yarn add vue-video-player`来安装插件。

2. **引入组件**:
在你的`.vue`文件或者全局样式中，导入`VideoPlayer`组件：

   <template>
     <div>
       <video-player></video-player>
     </div>
   </template>

   <script>
   import VideoPlayer from 'vue-video-player';
   export default {
     components: {
       VideoPlayer,
     },
   };
   </script>

3. **配置和使用**:
在组件内部，你可以通过传递选项设置视频属性，例如src、自动播放等。示例：

   <video-player
     :src="videoUrl"
     :autoPlay="true"
     controls
   ></video-player>

在`data`或`computed`中定义`videoUrl`变量存储你要播放的视频URL。

4. **事件监听**:
`vue-video-player`提供了丰富的事件API，如`play`, `pause`, `volumeChange`等，你可以注册事件处理器来响应这些事件。

5. **样式定制**:
如果需要自定义外观，可以使用内联样式或者单独的CSS文件来覆盖默认样式。