vue 使用 video-player

要在 Vue 中使用 video-player，需先安装 video-player 库。

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

接下来，在 main.js 中引入 video.js 和 vue-video-player。

import Vue from 'vue'
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'

Vue.use(VideoPlayer)

在组件中使用 video-player。

<template>
  <div>
    <video-player ref="player" :options="playerOptions" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: [
          {
            src: 'http://example.com/video.mp4',
            type: 'video/mp4'
          }
        ]
      }
    }
  }
}
</script>

在 playerOptions 中定义视频的选项，例如视频源、自动播放、控件等。

最后，在 App.vue 中使用该组件。

<template>
  <div id="app">
    <video-player />
  </div>
</template>