Video 自動播放


先說ios

ios之前的政策是視頻只能在用戶主動操作后才能播放,且播放時必須全屏

隨着 iOS 10 的正式發布,Safari 也迎來了大量更新,首先划出重點:1)iOS 10 Safari 支持特定視頻自動播放;2)iOS 10 Safari 支持視頻內聯播放。想了解更多細節的同學請接着往下看。

自動播放

IOS 10 Safari 允許自動播放以下兩種視頻:

  • 無音軌視頻;

  • 無聲音視頻(設置了 muted 屬性);

對於這兩種類型的視頻,可以通過112.png或 video.play() 兩種方式來自動播放,無需用戶主動操作。但是,如果它們在播放時變得有聲音(獲取了音軌,或者 muted 屬性被取消),Safari 會暫停播放。

通過112.png自動播放的視頻元素還需要滿足一個條件:在可視區域內。同樣,如果它們在播放時因為頁面滾動等原因導致不可見,Safari 也會暫停播放。

通過 video.play() 自動播放的視頻元素無需可見。video.play() 返回的是 Promise,如果不滿足自動播放條件,會觸發 reject 行為。

內聯播放

在 iOS 10 Safari 中,通過113.png可以讓視頻內聯播放。設置了 playsinline 屬性的視頻在播放時不會自動全屏,但用戶可以點擊全屏按鈕來手動全屏;沒有設置 playsinline 的視頻會在播放時自動全屏。無論是否設置 playsinline 屬性,退出全屏后視頻都會繼續播放。

ios版本微信還是要借助於微信JSSDK來實現自動播放。

再說Android

Android自帶瀏覽器目前還是無法自動播放。微信借助於微信JSSDK可以實現自動播放。

下面來個demo:


免責聲明!

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



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