基本介紹
經常會碰到客戶詢問，為什么我設置了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，允許自動播放，比如：
<!-- 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. 如果檢測到瀏覽器自動播放失敗，提示用戶點擊播放
Aliplayer的使用
對於上面兩種方式Aliplayer提供了對應功能，幫助用戶去實現更好的用戶體驗。
檢測瀏覽器是否能夠自動播放
Aliplayer提供了'autoplay'事件，用於通知當前視頻是否滿足瀏覽器自動播放的政策，如果不滿足返回false，否則為true。
player.on('autoplay', function(data) { if(data.paramData) //可以自動播放 { //隱藏提示 }else //不可以自動播放 { //顯示提示用戶點擊播放 } }); 效果如下：
靜音播放
對於一些無需播放聲音的場景比如視頻監控，可以讓視頻靜音然后自動播放，后期用戶可以通過音量控制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(); }); }); 效果如下：
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>
原文鏈接
更多技術干貨 請關注阿里雲雲棲社區微信號 ：yunqiinsight