Vue-CoreVideoPlayer 视频组件二次封装

以下是一个使用 Vue-CoreVideoPlayer 二次封装的移动端视频播放器组件示例：

1. 安装依赖：

npm install vue-core-video-player --save

2. 新建 VideoPlayer.vue 组件文件，并编写组件代码：

<template>
  <div class="video-container" ref="videoContainer">
    <core-video-player :autoplay="autoplay"
                       :sources="sources"
                       :poster="poster"
                       :controls="true"
                       :options="options"
                       :onTimeupdate="handleTimeupdate"
                       :loop="loop"/>
  </div>
</template>

<script>
import CoreVideoPlayer from 'vue-core-video-player';
import { debounce } from 'lodash';

export default {
  name: 'VideoPlayer',
  components: {
    CoreVideoPlayer,
  },
  props: {
    url: {
      type: String,
      required: true,
    },
    posterUrl: String,
    autoplay: Boolean,
    loop: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      sources: [{
        src: this.url,
        type: 'video/mp4',
      }],
      poster: this.posterUrl,
      options: {
        fluid: true,
        aspectRatio: '16:9',
        playbackRates: [0.5, 1, 1.5, 2],
        controlBar: {
          volumePanel: {
            inline: false,
          },
        },
        plugins: {
          retryButtonPlugin: {
            align: 'right',
          },
        },
      },
      videoElement: null,
      currentTime: 0,
    };
  },
  created() {
    this.handleTimeupdate = debounce(this.handleTimeupdate, 500);
  },
  mounted() {
    this.videoElement = this.$refs.videoContainer.querySelector('video');
  },
  methods: {
    handleTimeupdate() {
      this.currentTime = this.videoElement.currentTime;
      this.$emit('timeupdate', this.currentTime);
    },
  },
};
</script>

<style scoped>
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  margin-bottom: 20px;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

3. 在使用组件的地方引入 VideoPlayer 组件：

<template>
  <div>
    <!-- ... -->
    <video-player :url="videoUrl" :poster-url="posterUrl" @timeupdate="handleTimeuapte"></video-player>
    <!-- ... -->
  </div>
</template>

<script>
import VideoPlayer from './components/VideoPlayer';

export default {
  name: 'App',
  components: {
    VideoPlayer,
  },
  data() {
    return {
      videoUrl: 'https://example.com/video.mp4',
      posterUrl: 'https://example.com/poster.jpg',
      currentTime: 0,
    };
  },
  methods: {
    handleTimeuapte(currentTime) {
      this.currentTime = currentTime;
    },
  },
};
</script>

在这个示例中，VideoPlayer 组件将传递给它的 url 和 posterUrl 属性作为 CoreVideoPlayer 组件的 sources 和 poster 属性。组件还将自定义的时间更新处理功能暴露给父组件，当 CoreVideoPlayer 组件所包含的 video 元素触发 timeupdate 事件时，则对应的功能将自动被执行。最后，该组件可以通过 @timeupdate 事件向父组件发送每秒更新值。

使用这种方式进行移动端 视频播放器 的二次封装能够大大降低应用程序中的耦合性，并使其更加模块化。同时，您还可以自定义播放器的功能和样式以适应特定的项目需求。