先說ios
ios之前的政策是視頻只能在用戶主動操作后才能播放,且播放時必須全屏。
隨着 iOS 10 的正式發布,Safari 也迎來了大量更新,首先划出重點:1)iOS 10 Safari 支持特定視頻自動播放;2)iOS 10 Safari 支持視頻內聯播放。想了解更多細節的同學請接着往下看。
自動播放
IOS 10 Safari 允許自動播放以下兩種視頻:
-
無音軌視頻;
-
無聲音視頻(設置了 muted 屬性);
對於這兩種類型的視頻,可以通過
或 video.play() 兩種方式來自動播放,無需用戶主動操作。但是,如果它們在播放時變得有聲音(獲取了音軌,或者 muted 屬性被取消),Safari 會暫停播放。
通過
自動播放的視頻元素還需要滿足一個條件:在可視區域內。同樣,如果它們在播放時因為頁面滾動等原因導致不可見,Safari 也會暫停播放。
通過 video.play() 自動播放的視頻元素無需可見。video.play() 返回的是 Promise,如果不滿足自動播放條件,會觸發 reject 行為。
內聯播放
在 iOS 10 Safari 中,通過
可以讓視頻內聯播放。設置了 playsinline 屬性的視頻在播放時不會自動全屏,但用戶可以點擊全屏按鈕來手動全屏;沒有設置 playsinline 的視頻會在播放時自動全屏。無論是否設置 playsinline 屬性,退出全屏后視頻都會繼續播放。
ios版本微信還是要借助於微信JSSDK來實現自動播放。
再說Android
Android自帶瀏覽器目前還是無法自動播放。微信借助於微信JSSDK可以實現自動播放。
下面來個demo:

