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 變量之后，視頻可以正確播放了