在vue项目中需要使用到播放video视频，在网上找了一番资料，决定使用 video.js插件
第一步：安装引用的问题
安装npm install --save-dev video.js
引入在main.js中
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video
这时候遇到了第一个问题，因为我使用的是vue 3，不再支持 Vue.prototype.$video = Video 方式，在网上查询资料之后
调用方式改变
const app = createApp(App)
app.use(store)
app.use(router)
app.use(Vant)
app.config.globalProperties.$video = Video
app.mount("#app");
完成引入之后，就可以在vue中使用$video 方法
id="myVideo" class="video-js" > v-bind:src="videos" type="video/mp4" > initVideo(){ this.$nextTick(() => { let myPlayer = this.$video(myVideo, { //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。 controls: true, //自动播放属性,muted:静音播放 //autoplay: "muted", autoplay:false, //建议浏览器是否应在 preload: "auto", //设置视频播放器的显示宽度（以像素为单位） width: "335px", //设置视频播放器的显示高度（以像素为单位） height: "200px", controlBar:{ //点触显示控制条 playToggle:true } }); }) } 在vue页使用$video方法调用时候遇到问题，一直提示无法找到视频文件正确路径，无法播放；后面想到，视频播放需要在DOM加载完毕，并且获取到后端返回的视频播放地址之后才可以正确 播放；所以$nextTick 使用，并且确认需要拿到 videos 变量之后，视频可以正确播放了