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