解決Chrome瀏覽器無法自動播放音頻視頻的問題,Uncaught (in promise) DOMException


轉載自:http://www.nooong.com/docs/chrome_video_autoplay.htm

在最新版的Chrome瀏覽器(以及所有以Chromium為內核的瀏覽器)中,已不再允許自動播放音頻和視頻。(Google的某些做法還真是令開發者不爽)。就算你為video或audio標簽設置了autoplay屬性也一樣不能自動播放。

<video autoplay></video> 
  • 1

如果你用 javascript 代碼顯式調用play方法,你將會在控制台看到如下異常:Uncaught (in promise) DOMException

這是因為,Chrome只允許用戶對網頁進行主動觸發后才可自動播放音頻和視頻。其實,嚴格地來說,是Chrome不允許在用戶對網頁進行觸發之前播放音頻,而視頻其實是不受限制的。但因為視頻文件同樣包含了音頻,所以也一同被禁止了。Chrome這樣做的目的是為了防止開發者濫用自動播放功能而對用戶產生騷擾。

既然知道了原因,那就開始找解決方法。

比較常規的做法是,為video標簽設置muted屬性,使它靜音,這樣視頻就能自動播放了,但是沒有聲音。然后待用戶在網頁上有了任意觸發后,再將muted去掉。或者讓用戶手動去打開音頻(騰訊視頻就是這樣做的)。

<video autoplay muted></video> 
  • 1
document.body.addEventListener('mousedown', function(){ vdo.muted = false; }, false); 
  • 1
  • 2
  • 3

但是這樣給用戶的體驗終歸不太好。那么接下來介紹一種非常規的做法。

Chrome瀏覽器雖然對video標簽和audio標簽做了非常嚴格的限制,但它對另一個同樣能播放音頻和視頻的標簽iframe的限制卻沒那么嚴格。那么我們是否可使用iframe來觸發權限呢?

<video></video> <iframe allow="autoplay" style="display:none" src="一個空的音頻文件"></iframe> 
  • 1
  • 2
ifm.onload = function(){ vdo.src = 'YOUR_VIDEO_URL'; vdo.oncanplay = function(){ vdo.play(); }; }; 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

iframesrc屬性指向一個音頻文件,使它播放音頻。為了給用戶比較好的體驗,這個音頻文件最好是一個空的音頻文件,即沒有音頻內容的文件,時長也盡可能短一點,比如500ms。

iframe播放了這個音頻文件后,就能觸發網頁播放音頻的權限,這樣再來播放視頻或音頻,就沒有問題了。

PS:上面的代碼只是隨手寫的,你可根據自己的邏輯加以優化,只要清楚這個原理就可以了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM