video 標簽是 HTML5 中新增的元素,用于在網頁上插入視頻,支持多種視頻格式,包括 MP4、WebM、Ogg。
在 Vue 中使用 video 標簽非常簡單,只需將 video 標簽放在 Vue 組件模板中即可:
上面的代碼中,我們在組件的模板中定義了一個 video 標簽,并通過 Vue 的數據綁定方式綁定了 video 標簽的 src 屬性。同時,我們還使用 @click 綁定了 video 標簽的點擊事件,當用戶點擊 video 標簽時調用 playVideo 方法,播放視頻。
另外,在 Vue 中使用 video 標簽還需要注意以下幾點:
1. 添加 ref 屬性
我們需要給 video 標簽添加 ref 屬性,用于在組件中引用該標簽,以便我們可以通過 this.$refs.videoEl 獲取 video 標簽的引用。
2. 添加 controls 屬性
添加 controls 屬性,會在視頻上方默認生成一個控制條,包括播放/暫停、音量控制、進度條等,提高用戶體驗。
3. 綁定事件
我們可以通過綁定 video 標簽的 loadedmetadata 和 timeupdate 事件來獲取視頻載入時長信息和播放進度信息。
4. 使用插件
除了自帶的 video 標簽外,我們還可以通過 vue-video-player 等第三方插件來實現更豐富的視頻播放功能,如多碼率支持、字幕控制等。
總之,Vue 對 video 標簽的支持非常友好,可以讓我們快速實現網頁視頻播放功能。
上一篇idea vue項目搭建
下一篇idea 配置vue提示