阿里雲 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，容許自動播放，好比：

<!-- 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