開發中遇到的問題,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后改變音量。比較推薦