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

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

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

由于瀏覽器廠商為了提高用戶體驗禁止video標(biāo)簽可以有聲的自動播放，也就是說如果想讓video標(biāo)簽?zāi)軌蜃詣硬シ疟仨毥ovideo標(biāo)簽添加muted屬性。

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

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

首先我們要讓video標(biāo)簽?zāi)軌蜃詣硬シ牛簿褪亲?code>video標(biāo)簽靜音條件下自動播放。

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

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

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

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

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

如果是刷新或者是外部鏈接跳轉(zhuǎn)到此則會報如下錯誤：

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

這個錯誤的意思是：play() 失敗，因為用戶沒有先與文檔交互。

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

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

補(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án)播放。
muted 靜音播放。
poster 視頻的封面圖。
preload 如果出現(xiàn)該屬性，則視頻在頁面加載時進(jìn)行加載，并預(yù)備播放。如果使用 “autoplay”，該屬性無效。

總結(jié)

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

您可能感興趣的文章: