videojs vue 动态source_手把手从零开始封装一个vue视频播放器组件

好的，下面是从零开始封装一个基于videojs和vue的视频播放器组件的步骤。

1. 安装依赖

首先需要安装video.js和vue-video-player这两个依赖：

npm install video.js vue-video-player --save

2. 创建组件

创建一个名为VideoPlayer.vue的组件文件，并在文件中引入video.js和vue-video-player：

<template>
  <div>
    <video ref="videoPlayer" class="video-js"></video>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
import VueVideoPlayer from 'vue-video-player'

export default {
  name: 'VideoPlayer',
  props: {
    options: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      player: null
    }
  },
  mounted() {
    this.initPlayer()
  },
  methods: {
    initPlayer() {
      this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
        console.log('player is ready')
      })
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  }
}
</script>

<style>
/* video.js样式 */
.video-js {
  width: 100%;
  height: 100%;
}
</style>

在组件中，我们使用了video.js创建了一个video标签，并将其挂载到组件中。同时，我们通过props传递了一些配置项，如autoplay、controls等。

3. 使用组件

使用该组件时，可以通过options属性传递一些配置项，如下所示：

<template>
  <div>
    <VideoPlayer :options="{
      autoplay: false,
      controls: true,
      sources: [{
        src: 'http://example.com/path/to/video.mp4',
        type: 'video/mp4'
      }]
    }" />
  </div>
</template>

<script>
import VideoPlayer from './VideoPlayer.vue'

export default {
  name: 'App',
  components: {
    VideoPlayer
  }
}
</script>

<style>
/* 样式 */
</style>

在使用组件时，我们只需要传递一个options属性，其中包含了视频链接、视频类型、是否自动播放等配置即可。这里我们只提供了一个视频链接，实际使用时可以根据需求添加更多的源。

至此，一个基于video.js和vue的视频播放器组件就完成了。需要注意的是，该组件在使用时需要提供video.js的样式文件，并且需要在mounted生命周期函数中初始化播放器，以及在beforeDestroy生命周期函数中销毁播放器实例。