快捷導(dǎo)航

Vue中video標(biāo)簽如何實(shí)現(xiàn)不靜音自動(dòng)播放

更新時(shí)間：2023年01月31日 09:37:39 作者：Oh?No?發(fā)量又少了

最近在做大屏展示需要在一開始播放引導(dǎo)視頻,產(chǎn)生自動(dòng)播放需求,下面這篇文章主要給大家介紹了關(guān)于Vue中video標(biāo)簽如何實(shí)現(xiàn)不靜音自動(dòng)播放的相關(guān)資料,需要的朋友可以參考下

由于瀏覽器廠商為了提高用戶體驗(yàn)禁止video標(biāo)簽可以有聲的自動(dòng)播放，也就是說如果想讓video標(biāo)簽?zāi)軌蜃詣?dòng)播放必須給video標(biāo)簽添加muted屬性。

但是在開發(fā)的過程中我們需要用視頻自動(dòng)有聲播放，比如一些學(xué)習(xí)網(wǎng)站，需要老師或同學(xué)進(jìn)入頁(yè)面就可以播放學(xué)習(xí)視頻，那么如何去實(shí)現(xiàn)呢？

我是在Vue框架下實(shí)現(xiàn)的，其他框架僅供參考。

首先我們要讓video標(biāo)簽?zāi)軌蜃詣?dòng)播放，也就是讓video標(biāo)簽靜音條件下自動(dòng)播放。

<video 
  ref="videoPlayer"
  id="videoPlayer"
  class="video" 
  width="100%" 
  autoplay 
  muted
  controls 
  :src="addPre()">
</video>

然后是我們通過JavaScript的方式讓video標(biāo)簽先取消靜音然后再自動(dòng)播放。

this.$nextTick(() => {
  this.$refs.videoPlayer.muted = false;
  this.$refs.videoPlayer.play();
})

此方法我只在Vue框架下嘗試可以，在其他框架沒有嘗試。

此方法還需要注意的一點(diǎn)是如果此方法所在頁(yè)面刷新或是從其他網(wǎng)站直接跳轉(zhuǎn)到此頁(yè)面則此方法就不管用了。

如果是刷新或者是外部鏈接跳轉(zhuǎn)到此則會(huì)報(bào)如下錯(cuò)誤：

Uncaught (in promise) DOMException: play() failed because the user didn’t interact with the document first.

這個(gè)錯(cuò)誤的意思是：play() 失敗，因?yàn)橛脩魶]有先與文檔交互。

使用play方法之前用戶必須得和文檔（也就是頁(yè)面進(jìn)行）交互，刷新和從外部鏈接跳轉(zhuǎn)都沒有與頁(yè)面進(jìn)行交互。但是在Vue項(xiàng)目中從一個(gè)路由頁(yè)面跳轉(zhuǎn)到視頻播放頁(yè)面是可以的，這是為什么呢？

因?yàn)閂ue是單頁(yè)面富應(yīng)用，雖然我們看上去頁(yè)面是從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面但是這些路由頁(yè)面始終在同一個(gè)文檔（頁(yè)面）中，當(dāng)我們點(diǎn)擊實(shí)現(xiàn)路由跳轉(zhuǎn)時(shí)就已經(jīng)實(shí)現(xiàn)了與文檔交互，所以不會(huì)報(bào)上面的錯(cuò)。

補(bǔ)充：video標(biāo)簽核心屬性：

src 要播放的視頻的 URL。
autoplay 如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。
controls 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕，進(jìn)度條等。
height 設(shè)置視頻播放器的高度。
width 設(shè)置視頻播放器的寬度。
autoplay 如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。 controls 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕,進(jìn)度條等。
loop 如果出現(xiàn)該屬性，視頻播放結(jié)束會(huì)再次播放，即循環(huán)播放。
muted 靜音播放。
poster 視頻的封面圖。
preload 如果出現(xiàn)該屬性，則視頻在頁(yè)面加載時(shí)進(jìn)行加載，并預(yù)備播放。如果使用 “autoplay”，該屬性無效。

總結(jié)

到此這篇關(guān)于Vue中video標(biāo)簽如何實(shí)現(xiàn)不靜音自動(dòng)播放的文章就介紹到這了,更多相關(guān)Vue video標(biāo)簽自動(dòng)播放內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: