基本介紹
經(jīng)常會(huì)碰到客戶詢問(wèn)，為什么我設(shè)置了autoplay為true，但是沒(méi)有自動(dòng)播放，每次都要向客戶解釋這個(gè)是瀏覽器從用戶體驗(yàn)角度考慮做的限制，客戶會(huì)繼續(xù)詢問(wèn)那我要怎么做？ 針對(duì)這個(gè)問(wèn)題Aliplayer也專們做過(guò)優(yōu)化，提供一些方式讓客戶能更好的處理這種情況。

現(xiàn)象描述
有聲音視頻無(wú)法自動(dòng)播放這個(gè)在移動(dòng)端上一直都是這個(gè)限制，桌面版的Safari在2017年的11版本也宣布禁掉帶有聲音的多媒體自動(dòng)播放功能，Chrome也在2018年4月份發(fā)布的66版本也正式關(guān)掉了聲音自動(dòng)播放，也就是說(shuō)通過(guò)H5方式播放音視頻在桌面版瀏覽器自動(dòng)播放會(huì)失效。

<audio autopaly></audio>
<video autoplay></video>
瀏覽器廠家為什么要禁止自動(dòng)播放的呢？ 移動(dòng)端主要考慮的是手機(jī)的帶寬以及對(duì)電池的消耗，Chrome主要基于下面的考慮：

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

Safari允許自動(dòng)播放政策，具體請(qǐng)查看Safari Video Policy：

視頻沒(méi)有音軌
Video設(shè)置為muted，<video muted>
當(dāng)Video元素不可見(jiàn)，比如CSS設(shè)置為display:none或者滾動(dòng)到非可見(jiàn)區(qū)域，視頻將會(huì)被暫停
Chrome允許自動(dòng)播放政策： 具體請(qǐng)查看Chrome Autoplay

靜音的視頻
有用戶行為交互
符合Media Engagement Index，只要用戶在當(dāng)前網(wǎng)頁(yè)主動(dòng)播放過(guò)超過(guò)7s的音視頻（視頻窗口不能小于200 x 140）
移動(dòng)端用戶添加網(wǎng)站到首頁(yè)屏幕（主要是PWA應(yīng)用）
嵌套到IFrame，允許自動(dòng)播放，比如：

<!-- Autoplay is allowed. -->
<iframe src="https://cross-origin.com/myvi...; allow="autoplay">

<!-- Autoplay and Fullscreen are allowed. -->
<iframe src="https://cross-origin.com/myvi...; allow="autoplay; fullscreen">

總結(jié)一下共同點(diǎn)： 靜音視頻或者有用戶交互，對(duì)于不能自動(dòng)播放的瀏覽器可以使用的方法如下：

先把音視頻加一個(gè)muted的屬性讓視頻可以自動(dòng)播放，頁(yè)面再顯示一個(gè)關(guān)閉聲音的按鈕，提示用戶打開(kāi)聲音

如果檢測(cè)到瀏覽器自動(dòng)播放失敗，提示用戶點(diǎn)擊播放

Aliplayer的使用
對(duì)于上面兩種方式Aliplayer提供了對(duì)應(yīng)功能，幫助用戶去實(shí)現(xiàn)更好的用戶體驗(yàn)。

檢測(cè)瀏覽器是否能夠自動(dòng)播放
Aliplayer提供了'autoplay'事件，用于通知當(dāng)前視頻是否滿足瀏覽器自動(dòng)播放的政策，如果不滿足返回false，否則為true。

player.on('autoplay', function(data) {

if(data.paramData) //可以自動(dòng)播放{//隱藏提示}else //不可以自動(dòng)播放{//顯示提示用戶點(diǎn)擊播放}

});
效果如下：

靜音播放
對(duì)于一些無(wú)需播放聲音的場(chǎng)景比如視頻監(jiān)控，可以讓視頻靜音然后自動(dòng)播放，后期用戶可以通過(guò)音量控制UI開(kāi)啟聲音。 代碼如下：

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();});});

效果如下：

iOS微信自動(dòng)播放
iOS 的微信可以在WeixinJSBridgeReady事件里調(diào)用play方法，讓視頻自動(dòng)播放， 這個(gè)hack方式在Android手機(jī)不起作用， 具體代碼如下：

<script src="http://res.wx.qq.com/open/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>

總結(jié)

以上是生活随笔為你收集整理的阿里云 Aliplayer高级功能介绍(九)：自动播放体验的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。