安卓商店下架：走进安卓的重灾区----video

html5的video已经出来很久了在ios上使用基本上没什么毛病，但是安卓下就是一个重灾区了，各种体验差这几天搞了安卓的兼容，简直是要吐血所以特意总结了一些强势的坑点，接下来我们就来聊聊关于安卓商店下架：走进安卓的重灾区----video?以下内容大家不妨参考一二希望能帮到您!

安卓商店下架：走进安卓的重灾区----video

html5的video已经出来很久了。在ios上使用基本上没什么毛病，但是安卓下就是一个重灾区了，各种体验差。这几天搞了安卓的兼容，简直是要吐血。所以特意总结了一些强势的坑点。

常用的一些属性和方法

video.error // null正常 video.error.code // 1用户终止 2网络错误 3解码错误 4URL无效 video.currentTime // 当前播放的位置，赋值可改变位置 video.duration // 当前资源长度，流返回无限 video.paused // 是否暂停 video.ended // 是否结束 video.autoPlay // 是否自动播放 loadstart // 客户端开始请求数据 error // 请求数据时遇到错误（可以通过上一页的属性video.error.code查看具体错误原因） play // 开始播放时触发 pause // 暂停时触发 loadeddata // 数据已加载 waiting // 等待数据，并非错误 playing // play触发后执行一次 canplaythrough // 可以播放，已加载好 timeupdate // 播放时间改变 durationchange // 资源长度改变 ...

坑（本次主要是在微信X5浏览器中的测试，其他安卓浏览器下表现不一定一致）

自动播放

在ios上会自动全屏播放，需要在video标签上设置一个属性 webkit-playsinline，ios10及以上版本属性名改成 playsinline。安卓上，无法自动播放，必须手动触发视频的播放。调用任何方法都没用，据说这个为了帮用户省流量而设定的。但是安卓在首次触发之后，再次触发可以通过调用 .play 来触发播放视频。因此做兼容的时候可以设一个判断是否首次播放的标志来处理。

默认样式

安卓下，不能自动播放，因此视频在播放前会带有视频的默认白色加圆圈播放按钮且背景是纯黑色，可以说是非常丑陋了。为了好点的用户体验就是可以在视频的最上层覆盖一张引导用户点击播放视频的引导图，这样既不丑陋又让用户知道这里需要点一下才有东西出现。我的做法是增加一个手指引导图，然后让该元素可穿透(即设置 pointer-events:none; 让其不会成为任何鼠标事件的target)，这样点击元素的时候就相当于点击了视频播放。然后监听 playing 事件，如果视频开始播放了则把引导图隐藏。具体如下：

作者：winty

链接：https://juejin.im/post/5d8046345188253849631aa6

,