移动端浏览器视频自动播放

在手机里做到视频自动播放

遇到的问题

1，video标签里有个autoplay的属性。在pc端可以实现自动播放。但是在移动端，为了避免浪费流量。自动播放几乎被禁止。需要用户手动触发。

chrome官方：https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

2，即使播放video视频，也会出现很多问题。比如全屏播放、控制条无法隐藏。全屏影响交互，控制条很不美观。

如何解决

方案一：canvas绘制video

用canvas绘制video，利用requestAnimationFrame，将视频每一帧绘制成canvas。

以下为demo。（不属于业务代码和公司内部文件，视频选自w3cschool）可以模拟点击进行触发。（假装实现自动播放。）

  开始

  暂停

方案二：将用户上传的video，转化成gif，前端用gif图展示动态效果。

参考：https://jnordberg.github.io/gif.js/

这样在移动端浏览器展示的时候可以实现滚动到某一位置，实现动态播放。

还有一个问题，判断网络链接状态

是wifi，还是蜂窝数据。

我看了一下官方文档Network Information API，目前大部分浏览器还没有实现。navigator.connection。

所以如果：

1，蜂窝数据下不播放，Wi-Fi下才播放：只能在客户端才可以，通过jsbridge获取网络状态。

2，如果网速ok就播放，网速慢不播放：采用下载一个指定图片，检测下载速度。