vue如何使用原生video標簽播放視頻
更新時間：2024年03月21日 17:25:55 作者：菜鳥茜
這篇文章主要介紹了vue如何使用原生video標簽播放視頻問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
使用原生video標簽播放視頻
頁面效果如下圖
如果想實現(xiàn)自動播放，需要加autoplay屬性，
但是加了之后也可能出現(xiàn)無法自動播放的問題，還需要在加muted屬性
muted 是靜音屬性 添加了以后 會自動播放 但是沒有聲音
怎么取舍，就看你的需求如何平衡效果了，我個人覺得簡簡單單只加一個controls就好了。
vue相關代碼
<!--原生video標簽播放視頻 2022-07-22 -->
<template>
<div>
<!-- muted 是靜音屬性 添加了以后 會自動播放 但是沒有聲音 -->
<video width="600" height="450" autoplay muted controls :src="videoUrl"></video>
</div>
</template>
<script>
export default {
name: "",
data() {
return {
videoUrl:
"https://aliyun.oss.careyshop.cn/uploads/files/20191113/9bbf7ac9-a452-445b-8152-4443bc3505e8.mp4?type=aliyun",
};
},
methods: {},
};
</script>
<style scoped>
</style>彩蛋：
我在實現(xiàn)視頻播放效果時，網(wǎng)上找了很多插件來用，按照指示方法一步一步來，但是可能是項目版本問題
我每次用的插件都沒能實現(xiàn)視頻播放效果，給我整得大無語
最后，只能選擇用原生標簽，沒想到輕輕松松就可以視頻播放了
枉費我之前繞了那么一大圈，有時候不得不承認，也許最簡單的恰恰是最高效的。
總結
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue路徑分為絕對路徑、相對路徑、~+路徑?及?別名+路徑,在js中,引入帶別名的文件路徑,不需要在別名前加~?,在css或者style中引入的需要在路徑前面加~,路徑以?~?開頭,其后的部分將會被看作模塊依賴,本文給大家介紹vue中引用文件路徑問題,感興趣的朋友一起看看吧2023-12-12
圖片輪播是前端中經(jīng)常需要實現(xiàn)的一個功能。最近學習Vue.js，就針對Swiper進行封裝，實現(xiàn)一個簡單的圖片輪播組件。感興趣的朋友跟隨腳本之家小編一起學習吧2018-02-02
Vue Element前端應用開發(fā)之Vuex中的API Store View的使用
這篇文章主要介紹了Vue Element前端應用開發(fā)之Vuex中的API Store View的使用，對Vue感興趣的同學，可以參考下2021-05-05
在項目中使用ref時有時候直接取值,有時候返回的卻是一個數(shù)組,不知其中緣由,后查了一下ref用法,在這里給大家分享vue中ref的用法,感興趣的朋友一起看看吧2023-11-11
vue?eslint報錯error?"Component?name?"*****"
這篇文章主要給大家介紹了關于vue?eslint報錯error?“Component?name?“*****“?should?always?be?multi-word”的解決方法,文中通過圖文以及實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue模式history下在iis中配置流程，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
淺談vue中使用編輯器vue-quill-editor踩過的坑
這篇文章主要介紹了淺談vue中使用編輯器vue-quill-editor踩過的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
今天小編就為大家分享一篇關于詳解vue-router導航守衛(wèi)，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
今天小編就為大家分享一篇vue輸入節(jié)流,避免實時請求接口的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
很多朋友不明白在使用vue for時為什么要key，key的作用有哪些,在文中給大家詳細介紹，需要的朋友可以參考下2019-07-07