阿里雲 Aliplayer高級功能介紹(九):自動播放體驗

基本介紹
經常會碰到客戶詢問,爲什麼我設置了autoplay爲true,但是沒有自動播放,每次都要向客戶解釋這個是瀏覽器從用戶體驗角度考慮做的限制,客戶會繼續詢問那我要怎麼做? 針對這個問題Aliplayer也專們做過優化,提供一些方式讓客戶能更好的處理這種情況。

現象描述
有聲音視頻無法自動播放這個在移動端上一直都是這個限制,桌面版的Safari在2017年的11版本也宣佈禁掉帶有聲音的多媒體自動播放功能,Chrome也在2018年4月份發佈的66版本也正式關掉了聲音自動播放,也就是說通過H5方式播放音視頻在桌面版瀏覽器自動播放會失效。

<audio autopaly></audio>
<video autoplay></video>
瀏覽器廠家爲什麼要禁止自動播放的呢? 移動端主要考慮的是手機的帶寬以及對電池的消耗,Chrome主要基於下面的考慮:

improve the user experience
minimize incentives to install ad blockers
reduce data consumption on expensive and/or constrained networks 總之一句話,從用戶角度考慮。
破解之法
只要視頻沒有聲音或者有用戶交互了就可以播放, 現在來看一下Safari和Chrome的具體政策:

Safari允許自動播放政策,具體請查看Safari Video Policy:

視頻沒有音軌
Video設置爲muted,<video muted>
當Video元素不可見,比如CSS設置爲display:none或者滾動到非可見區域,視頻將會被暫停
Chrome允許自動播放政策: 具體請查看Chrome Autoplay

靜音的視頻
有用戶行爲交互
符合Media Engagement Index,只要用戶在當前網頁主動播放過超過7s的音視頻(視頻窗口不能小於200 x 140)
移動端用戶添加網站到首頁屏幕(主要是PWA應用)
嵌套到IFrame,允許自動播放,比如:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章