码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-01-28 17:37:06      阅读:512      评论:0      收藏:0      [点我收藏+]

标签:移动   ons   src   constrain   one   function   pwa   nim   http   

基本介绍
经常会碰到客户询问,为什么我设置了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,允许自动播放,比如: