vue3使用最新版vue-video-player视频组件

注意：

由于增加了对React的支持，vue视频播放器包现在已重命名为@videojs播放器/vue。此外，对Vue的支持也发生了重大变化，该组件的最新版本仅支持Vue3。

上一个版本的vue视频播放器包将在v6.0中发布，它只会重新导出@videojs player/vue中的所有内容，所以如果你准备使用新版本的vue视频播放器，请直接导入@videojs-player/vue。

最新版本的videojs播放器支持对绝大多数Video.js配置选项的响应，并允许您完全自定义播放器的控制面板和交互细节，这要归功于该组件在内部对不同的框架进行了足够的处理。

旧版本

如果您正在为Vue2寻找该组件的遗留版本，请使用vue-video-player@5.x

一、使用cdn或npm安装组件

NPM

npm install video.js @videojs-player/vue --save

YARN

yarn add video.js @videojs-player/vue

二、局部或全局引入组件

1、全局引入

打开main.js加入以下内容

import App from './App.vue'
// 视频插件
import VueVideoPlayer from '@videojs-player/vue'
import 'video.js/dist/video-js.css'
const app = createApp(App)
app.use(VueVideoPlayer)

2、局部引入

<template>
  <video-player
    src="/your-path/video.mp4"  // 视频地址
    poster="/your-path/poster.jpg" // 视频默认封面
    controls // 显示内置工具条
    :loop="true" // 循环播放
    :volume="0.6"  // 默认播放音量
    :autoplay="true" // 是否自动播放
    playbackRate="" // 默认播放速率
    playbackRates="" // 倍速选项
    @mounted="..."
    @ready="..."
    @play="..."
    @pause="..."
    @ended="..."
    @seeking="..."
    ...
  />
</template>

<script>
  import { defineComponent } from 'vue'
  import { VideoPlayer } from '@videojs-player/vue'
  import 'video.js/dist/video-js.css'

  export default defineComponent({
    components: {
      VideoPlayer
    }
  })
</script>

更多参数设置请参考github：https://github.com/surmon-china/videojs-player