阿里云 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