基本介绍

经常会碰到客户询问，为什么我设置了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 //不可以自动播放{//显示提示用户点击播放}});

效果如下：

3752ca77bfcd167029fec504028da610054e6dc5

静音播放

对于一些无需播放声音的场景比如视频监控，可以让视频静音然后自动播放，后期用户可以通过音量控制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();});});

效果如下：
8838039a126a380dbdf006fa6a6b9ac708c5c121

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>

原文链接

阿里云 Aliplayer高级功能介绍(九)：自动播放体验 1相关推荐

阿里云 Aliplayer高级功能介绍(九)：自动播放体验
基本介绍经常会碰到客户询问,为什么我设置了autoplay为true,但是没有自动播放,每次都要向客户解释这个是浏览器从用户体验角度考虑做的限制,客户会继续询问那我要怎么做? 针对这个问题Alipl ...
阿里云 Aliplayer高级功能介绍(二)：缩略图
为什么80%的码农都做不了架构师?>>> 基本介绍 Aliplayer提供了缩略图的功能,让用户在拖动进度条之前知道视频的内容,用户能够得到很好的播放体验,缩略图是显示在Con ...
阿里云 Aliplayer高级功能介绍(二)：缩略图 1
基本介绍 Aliplayer提供了缩略图的功能,让用户在拖动进度条之前知道视频的内容,用户能够得到很好的播放体验,缩略图是显示在Controlbar的上面,并且包含当前的时间,阿里云的媒体处理服务提供 ...
阿里云 Aliplayer高级功能介绍(三)：多字幕
基本介绍国际化场景下面,播放器支持多字幕,可以有效解决视频的传播障碍难题,该功能适用于视频内容在全球范围内推广,阿里云的媒体处理服务提供接口可以生成多字幕,现在先看一下具体的效果: WebVTT格式 ...
阿里云 Aliplayer高级功能介绍(四)：直播时移
基本介绍时移直播基于常规的HLS视频直播,直播推流被切分成TS分片,通过HLS协议向播放用户分发,用户请求的m3u8播放文件中包含不断刷新的TS分片地址:对于常规的HLS直播而言,TS分片地址及相应 ...
阿里云 Aliplayer高级功能介绍(七)：多分辨率
基本介绍网络环境比较复杂.网速不稳定,Aliplayer提供了多分辨率播放的模式,用户可以手工切换分辨率和播放器选择最优分辨率,基本UI如下: 66ccc596257a5db1d0f106b5745 ...
阿里云Aliplayer高级功能介绍(一)：视频截图
基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以 ...
阿里云Aliplayer高级功能介绍(一)：视频截图 1
基本介绍 H5 Video是不提供截图的API的, 视频截图需要借助Canvas,通过Canvas提供的drawImage方法,把Video的当前画面渲染到画布上, 最终通过toDataURL方法可以 ...
阿里云 Aliplayer高级功能介绍(五)：多语言
基本介绍 Aliplayer默认支持中文和英文,并且依赖于浏览器的语言设置自动启用中文或英文资源, 除了支持这两种资源外,还提供自定义语言的形式,支持其他国际语言,另外Aliplayer还支持点播服务 ...

阿里云 Aliplayer高级功能介绍(九)：自动播放体验 1