chrome中video標簽不能自動播放,autoplay屬性失效


開發中遇到的問題,video標簽設置了自動播放,但是在chrome中加載不播放。發現在控制台中為video執行play()是可以播放的。於是嘗試頁面加載完成后執行play(),控制台報錯“Uncaught(in promise)DOMException:play()”

最后發現問題是chrome在66版本后禁止了audio和video的自動播放。

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

https://www.cnblogs.com/ygunoil/p/11766698.html

https://blog.csdn.net/vM199zkg3Y7150u5/article/details/80327178

解決:

因為我的需求恰好視頻是無聲的,所以對video設置了muted靜音屬性,因為實際上chrome限制的是音頻的自動播放,靜音的視頻還是可以播放的。

更進一步:

如果確實有視頻自動播放的需求又該怎么辦呢?總結了一下網上各種方案。

方案一:在chrome 瀏覽器中輸入:chrome://flags,搜索“Autoplay policy”,默認為“Default”,修改為 “No user gesture is required” 就可以了。(但這個需要用戶去修改,大多情境下又是不合適的,而且我並沒找到這一項

方案二:利用限制不嚴格的 iframe 標簽播放一段幾百毫秒的無聲音頻,iframe的onended/onload事件調用video.play()

方案三:利用用戶鼠標移動等事件觸發play()

方案四:設置靜音播放,500ms后改變音量。比較推薦


免責聲明!

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



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