vue项目中播放视频video遇到的问题

在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 方法

<van-col span="24">
    <video
       id="myVideo"
       class="video-js"
    >
    <source
       v-bind:src="videos"
       type="video/mp4"
    >
    </video>
</van-col>

initVideo(){
   this.$nextTick(() => {
       let myPlayer = this.$video(myVideo, {
            //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
            controls: true,
            //自动播放属性,muted:静音播放
            //autoplay: "muted",
                        autoplay:false,
            //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
            preload: "auto",
            //设置视频播放器的显示宽度（以像素为单位）
            width: "335px",
            //设置视频播放器的显示高度（以像素为单位）
            height: "200px",
                        controlBar:{ //点触显示控制条
              playToggle:true
            }
     });
  })
}

在vue页使用$video方法调用时候遇到问题，一直提示无法找到视频文件正确路径，无法播放；后面想到，视频播放需要在DOM加载完毕，并且获取到后端返回的视频播放地址之后才可以正确

播放；所以$nextTick 使用，并且确认需要拿到 videos 变量之后，视频可以正确播放了