vue如何使用原生video標(biāo)簽播放視頻
更新時間：2024年03月21日 17:25:55 作者：菜鳥茜
這篇文章主要介紹了vue如何使用原生video標(biāo)簽播放視頻問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
使用原生video標(biāo)簽播放視頻
頁面效果如下圖
如果想實(shí)現(xiàn)自動播放，需要加autoplay屬性，
但是加了之后也可能出現(xiàn)無法自動播放的問題，還需要在加muted屬性
muted 是靜音屬性 添加了以后 會自動播放 但是沒有聲音
怎么取舍，就看你的需求如何平衡效果了，我個人覺得簡簡單單只加一個controls就好了。
vue相關(guān)代碼
<!--原生video標(biāo)簽播放視頻 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>彩蛋：
我在實(shí)現(xiàn)視頻播放效果時，網(wǎng)上找了很多插件來用，按照指示方法一步一步來，但是可能是項(xiàng)目版本問題
我每次用的插件都沒能實(shí)現(xiàn)視頻播放效果，給我整得大無語
最后，只能選擇用原生標(biāo)簽，沒想到輕輕松松就可以視頻播放了
枉費(fèi)我之前繞了那么一大圈，有時候不得不承認(rèn)，也許最簡單的恰恰是最高效的。
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了使用ElementUI寫一個前端分頁查詢的實(shí)例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
Vue前端項(xiàng)目自適應(yīng)布局的簡單方法
最近項(xiàng)目開發(fā)中遇到一個需求,需要實(shí)現(xiàn)寬度自動適應(yīng),所以下面這篇文章主要給大家介紹了關(guān)于Vue前端項(xiàng)目自適應(yīng)布局的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要介紹了vue文件使用iconfont解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
淺談vue中resetFields()使用注意事項(xiàng)
這篇文章主要介紹了淺談vue中resetFields()使用注意事項(xiàng)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue對storejs獲取的數(shù)據(jù)進(jìn)行處理時遇到的幾種問題小結(jié)
這篇文章主要介紹了vue對storejs獲取的數(shù)據(jù)進(jìn)行處理時遇到的幾種問題小結(jié),需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vue不同方法跳轉(zhuǎn)頁面，本文給大家分享多種方法，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
這篇文章主要為大家介紹了Vue3之列表動畫和狀態(tài)動畫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
這篇文章主要介紹了vue2中引用better-scroll和使用 better-scroll的方法，使用時有三個要點(diǎn)及注意事項(xiàng)在文中給大家詳細(xì)介紹 ,需要的朋友可以參考下2018-11-11
本文主要介紹了在Vue中使用的一些常見混淆用法,包括new Vue()、export default {}、createApp()等,以及如何使用混淆器對代碼進(jìn)行加固,需要的可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)移動端懸浮窗效果，vuejs實(shí)現(xiàn)div拖拽移動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12