vue-video-player封装

Vue Video Player 是一个基于 Vue 的视频播放器插件，它提供了一种方便的方式来在 Vue 项目中嵌入和控制视频播放。下面是一个简单的封装示例：

首先，安装 vue-video-player 插件：

npm install vue-video-player

然后，在你的 Vue 组件中引入并使用 vue-video-player：

<template>
  <div>
    <video-player ref="videoPlayer" :options="playerOptions" @ready="onPlayerReady"></video-player>
  </div>
</template>

<script>
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'

export default {
  name: 'MyVideoPlayer',
  components: {
    videoPlayer
  },
  data() {
    return {
      playerOptions: {
        autoplay: true,
        controls: true,
        sources: [{
          src: 'path/to/your/video.mp4',
          type: 'video/mp4'
        }]
      }
    }
  },
  methods: {
    onPlayerReady(player) {
      console.log('Video player is ready', player)
      // 可以在这里对视频播放器进行进一步的操作，例如设置播放器的样式、添加事件监听器等
    }
  }
}
</script>

上面的示例中，我们首先在模板中使用 `video-player` 组件，并通过 `options` 属性传递视频播放器的配置参数。在 `data` 中我们定义了播放器的选项，例如自动播放、显示控制条和视频源等。当播放器准备好后，会触发 `ready` 事件，我们可以通过该事件来获取播放器实例并进行进一步的操作。

这只是一个简单的封装示例，你可以根据具体的需求进行进一步的定制和扩展。希望能对你有所帮助！如果有更多问题，请继续提问。