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

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

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

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

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

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