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

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

遇到的问题

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就播放,网速慢不播放:采用下载一个指定图片,检测下载速度。

你可能感兴趣的:(移动端浏览器视频自动播放)