vue-video-player 插件使用

Vue-video-player 是一个用于 Vue.js 应用程序的轻量级视频播放插件，它简化了在 Vue 组件中集成视频播放功能的过程。这个插件允许您快速添加视频播放器，并提供了各种自定义选项和事件处理，以满足不同场景的需求。

以下是使用 Vue-video-player 的基本步骤：

1. 安装插件：
使用 npm 或者 yarn 来安装：

   npm install vue-video-player
   # 或者
   yarn add vue-video-player

2. 引入并注册插件：
在 main.js 或者其他 Vue 实例的配置文件中，导入并注册插件：

   import VueVideoPlayer from 'vue-video-player'
   Vue.use(VueVideoPlayer)

3. 在组件中使用视频播放器：
在你的 Vue 组件模板中，创建一个 `<vue-video-player>` 元素，设置 `url` 属性为视频源，可选地提供其他属性，如播放器样式、控制条、预加载等：

   <vue-video-player 
     url="path/to/your/video.mp4"
     :controls="true"
     :preload="auto"
     :poster="海报图片地址"
   ></vue-video-player>

你可以使用 `:options` 或 `v-bind="$attrs"` 来传递更多的自定义配置，如自定义事件监听等。

4. 事件处理：
视频播放器会触发一些内置事件，如 `play`, `pause`, `ended`, 等，你可以在组件内监听这些事件并执行相应的操作：

   <vue-video-player @play="onPlay" @pause="onPause"></vue-video-player>

   methods: {
     onPlay() {
       console.log('Video started playing');
     },
     onPause() {
       console.log('Video paused');
     }
   }