Vue.js是一個流行的前端框架，它提供了許多方便的API和事件，以幫助開發(fā)者快速構(gòu)建交互性的網(wǎng)頁應(yīng)用。canplay事件就是其中之一，它可以在視頻或音頻準(zhǔn)備就緒后觸發(fā)。

mounted() {
const player = this.$refs.player;
player.addEventListener('canplay', () =>{
console.log('視頻已準(zhǔn)備就緒！');
}
}

上面的代碼演示了如何使用canplay事件。首先，我們通過this.$refs獲取到了視頻播放器的引用，然后在mounted鉤子函數(shù)中添加了事件監(jiān)聽器。當(dāng)canplay事件觸發(fā)后，控制臺會輸出“視頻已準(zhǔn)備就緒！”這句話。

canplay事件的常見應(yīng)用是在載入視頻后顯示一個“Loading...”提示，只有在canplay事件觸發(fā)后才隱藏提示。

上面的代碼演示了如何使用canplay事件隱藏一個Loading提示。首先我們在video標(biāo)簽中添加了事件監(jiān)聽器和ref引用，加載完成后顯示Loading提示。在mounted鉤子函數(shù)中，我們指定了視頻的地址，并調(diào)用load方法來準(zhǔn)備播放。當(dāng)canplay事件觸發(fā)時，我們調(diào)用hideLoading方法來隱藏Loading提示。

總的來說，canplay事件是一個方便的API，有助于開發(fā)者更好地控制和管理視頻和音頻播放。