html5--移动端视频video的android兼容，去除播放控件、全屏等 _视频

下html5的视频播放一直是前端兼容的重灾区，各种体验差，被诟病已久。但之前的故宫穿越H5 ，和吴亦凡入伍H5 ，利用的视频技术，貌似又给人一种新面貌。
前段时间做某项目，恰好也是一个类似视频全屏的，下面跟大家分享下经历的坑和填坑的办法。
ios端问题其实没什么，基本都在端，基本每一个带有视频的项目都会遇到的，当然有特殊需求的产生的情况另说了就，问题主要有几个方面：
全屏处理；
自动播放；
播放控制；
隐藏播放控件；
video全屏的处理
【html5--移动端视频video的android兼容，去除播放控件、全屏等】这个其实不难，只需在video标签加个-属性即可，这个属性基本上在基于内核的移动端都是没问题的，此全屏非彼全屏，它是在浏览器视窗内的全屏，并不是占居整个手机的全屏，当然我们做web端需要的就是在的body内的视窗范围的全屏。

在ios下，视频被嵌入后，媒体的元数据加载完成后，会以全屏的形式显示出来，或者加个，可以看到画面。但在下，多数机子是不显示视频画面的，要不就是显示一个黑色的还不是全屏的播放控件，即使及加个封面也不济于是。因为在兼容的并不好，不如在视频上层加个div铺张图片，这个比较好的处理方式应该是：视频上加一层div做封面，由于不允许视频上层有东西，所以首先将视频设为的width：1px ，当播放后，上层的封面掉，同时width：100%或者你想要的宽度。
video的自动播放
这个的话就不多说了，相信大家跟我一样，试图寻找下，页面加载完毕就可以自动播放，但现实是残酷的，下是不允许自动播放的，即使你用了video.play(),也是不行的。必须有用户的主动触发，比如触摸了屏幕，有click或touch事件产生。不知以后会不会改进，但至少目前来看是不行的。比较的好的办法是，引导用户触发，滑屏或touch的行为，然后调用video.play()播放，给用户一个自动播放的错觉。
video播放的控制
对于video或者audio等媒体元素，有一些方法，常用的有play(),pause();也有一些事件，如'','','','ended',''.....等等。
在移动端有一些坑需要注意，不要轻易使用媒体元素的除'ended',''以外event事件，在不同的机子上可能有不同的情况产生，例如：
ios下监听''和''（是否已缓冲了足够的数据可以流畅播放）,当加载时是不会触发的，即使="auto"也没用，但在pc的调试器下和下，是会在加载阶段就触发。ios需要播放后才会触发。
总之就是现在的视频标准还不尽完善，有很多坑要注意，要使用前最好自己亲测一遍。
关于控制的问题还想说一点就是在播放视频时会有个控件初始化的过程，在全屏视频想伪装成非视频时，是我们很不想看到的，我的解决思路是这样：