Vue3之使用vue-video-player

最近写网站要用到视频播放，所以就在网上搜到很多关于video.js的使用以及vue-video-player的用法

这里我也遇到一个大坑，也是自己不仔细吧，硬是耽误我半天时间，也就引入的时候需要注意下名字

1.使用npm下载vue-video-player

npm i vue-video-player -S

2.在入口文件main.js引入

import { createApp } from 'vue'
import App from './App.vue'

// 视频插件
import VideoPlayer from 'vue-video-player/src'
import 'video.js/dist/video-js.css' 
import 'vue-video-player/src/custom-theme.css'

const app = createApp(App);
app.use(VideoPlayer)
app.mount('#app')

这里需要注意的是引入VideoPlayer从vue-video-player/src下引入的，如果写成vue-video-player就会报错：

3.创建video.vue文件，这个文件主要配置vue-video-player

需要使用视频播放的地方就引入该文件，传递播放的视频链接或本地视频以及封面

效果：