最近公司里有个项目，需求是在微信公众号里做一个类似于抖音一样的短视频播放的网页；

在经过两天的折腾之后终于给我搞出来了！

是不是一点视频就全屏播放？
是不是点了播放就直接顶到最顶层？
是不是同页面内的元素都被覆盖在下面？无论z-index还是其他css都无法改变？
是不是进度条控制条怎么也无法屏蔽?
是不是开启同层全屏，顶部的标题bar栏就没了？

接下来为你一一踩坑：
1.期间尝试了各种video属性，什么 x5-playsinline，x5-video-player-fullscreen="true"等等都加过，都无法实现安卓微信浏览器内视频的局部播放，甚至控制条都依然健在；

2.尝试了利用canvas去绘制视频，每40毫秒绘制一次视频画面，这个在IOS是可行的，到了安卓这里，在开启同层视频的情况下是可行的，但是会直接弹全屏，体验很不好，不开启同层视频的情况下，直接黑屏，看着视频在放，canvas就是不绘制，期间想试过x5内核的浏览器调试一下到底是什么问题，无奈没找到；

3.尝试了jsMpeg，这个一开始给了我希望，但是需要把MP4的视频转成ts或者mpg格式，然鹅就算转了也是没有声音只有图像，并且视频非常的花，和小时候家里电视收不到信号那种雪花屏一样，丝毫摸不着头脑，遂放弃；

4.尝试了页面内嵌iframe,同样，也是不行，一点播放，直接弹到最顶层；

总结如下：
安卓其实也很简单：video 加上 x5-video-player-type=‘h5-page’ 这个就行了！

最后附上我的代码：

<video id="video" 
 		src="video.mp4"  
 		autoplay="autoplay"  // 自动播放
        mtt-playsinline="true" // QQ浏览器播放完了会强制放广告，这属性是可以屏蔽
        loop="loop"  // 循环播放
        x5-video-player-type='h5-page' // x5内核安卓适配
        playsinline // IOS局部播放
        webkit-playsinline // IOS局部播放 >
</video>

至于自动播放，IOS没啥问题，安卓的没有解决；