基本介紹
經常會碰到客戶詢問,為什麼我設定了autoplay為true,但是沒有自動播放,每次都要向客戶解釋這個是浏覽器從使用者體驗角度考慮做的限制,客戶會繼續詢問那我要怎麼做? 針對這個問題Aliplayer也專們做過優化,提供一些方式讓客戶能更好的處理這種情況。
https://www.atatech.org/articles/129116#1 現象描述
有聲音視訊無法自動播放這個在移動端上一直都是這個限制,桌面版的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 總之一句話,從使用者角度考慮。
https://www.atatech.org/articles/129116#2 破解之法
隻要視訊沒有聲音或者有使用者互動了就可以播放, 現在來看一下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,允許自動播放,比如:
<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay">
<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvideo.html" allow="autoplay; fullscreen">
總結一下共同點: 靜音視訊或者有使用者互動,對于不能自動播放的浏覽器可以使用的方法如下:
1. 先把音視訊加一個muted的屬性讓視訊可以自動播放,頁面再顯示一個關閉聲音的按鈕,提示使用者打開聲音
2. 如果檢測到浏覽器自動播放失敗,提示使用者點選播放
https://www.atatech.org/articles/129116#3 Aliplayer的使用
對于上面兩種方式Aliplayer提供了對應功能,幫助使用者去實作更好的使用者體驗。
https://www.atatech.org/articles/129116#4 檢測浏覽器是否能夠自動播放
Aliplayer提供了'autoplay'事件,用于通知目前視訊是否滿足浏覽器自動播放的政策,如果不滿足傳回false,否則為true。
player.on('autoplay', function(data) {
if(data.paramData) //可以自動播放
{
//隐藏提示
}else //不可以自動播放
{
//顯示提示使用者點選播放
}
});
效果如下:
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZuBnL1MGZ2UGN1ADMxYTYkhjMwQDM1MWZmljMwcjNxQ2YmJ2N3E2YyUzNz8CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.png)
https://www.atatech.org/articles/129116#5 靜音播放
對于一些無需播放聲音的場景比如視訊監控,可以讓視訊靜音然後自動播放,後期使用者可以通過音量控制UI開啟聲音。 代碼如下:
let player = new Aliplayer({
id: 'J_prismPlayer',
width: '100%',
height:'100%',
autoplay: true,
source : 'https://sdk.fantasy.tv/hc.mp4'
},function(player){
//先靜音然後播放
player.mute();
player.play();
});
});
https://www.atatech.org/articles/129116#6 iOS微信自動播放
iOS 的微信可以在WeixinJSBridgeReady事件裡調用play方法,讓視訊自動播放, 這個hack方式在Android手機不起作用, 具體代碼如下:
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
let player = new Aliplayer({
id: 'J_prismPlayer',
width: '100%',
height:'100%',
autoplay: true,
source : 'https://sdk.fantasy.tv/hc.mp4'
});
$(document).on('WeixinJSBridgeReady',()=>{
if(player.tag)
{
player.tag.play();
}
});
</script>