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

html5--安卓兼容手机视频视频，去掉播放控件，全屏等经验。但在故宫穿越H5，吴亦凡入伍H5之前，所采用的视频技术似乎给人一种耳目一新的感觉。前段时间在做某个项目，恰好是一个全屏视频。给大家分享一下我经历过的坑以及填坑的方法。ios端的问题其实没什么，基本都是android端的，基本上每个有视频的项目都会遇到。当然，有特殊需要另议。问题主要有几个方面：全屏处理；自动播放；播放控制；隐藏播放控制；视频全屏处理其实也不难，只要在video标签中添加一个webkit-playsinline属性即可，这个属性在基于webkit内核的移动端基本没问题，这个全屏不是全屏，它是浏览器窗口中的全屏，而不是占据整个手机的全屏，当然我们web端需要的是文档正文中窗口范围内的全屏。ios下，嵌入视频并加载媒体元数据后，全屏显示，或者加一张海报，可以看到图片。但是在android下，大部分机器不显示视频画面，或者显示非全屏的黑色播放控件，即使加个海报封面也无济于事。因为海报不兼容android，所以最好在视频上层加个div来传图。这种比较好的处理方式应该是：在视频上加一层div作为封面。由于android不允许在视频上层放东西，所以先把视频设置为width:1px。播放完毕，去掉上层的覆盖物，width:100%或者你想要的宽度。视频自动播放我就不多说了。相信大家和我一样，都在努力寻找Android，可以在页面加载完成后自动播放，但现实是残酷的。安卓下是不允许自动播放的，就算你用。video.play()也是不可接受的。必须有来自用户的主动触发，例如触摸屏幕，并生成点击或触摸事件。不知道以后android会不会改进，但至少现在不行。更好的方式是引导用户触发、滑动或触摸，然后调用video.play()播放，给用户一种自动播放的错觉。视频播放的控制对于视频或音频等媒体元素，有一些方法，常用的有play()、pause()；还有一些事件，比如'loadstart','canplay','canplaythrough','ended','timeupdate'.....等等。移动端需要注意一些陷阱。不要轻易使用'ended'和'timeupdate'以外的媒体元素的event事件。不同的机器可能会出现不同的情况，例如：在ios下监听'canplay'和'canplaythrough'（是否缓冲了足够的数据可以流畅播放），加载时不会触发，即使preload="auto"是没用，但是在pc和android的chrome调试器下，会在loading阶段触发即可。ios只有播放后才会触发。总之，目前的视频标准并不完善，需要注意的陷阱也很多。最好在使用前亲自测试一下。关于控件的问题我还要说一点，就是android在播放视频的时候会有一个控件初始化的过程。当全屏视频想要伪装成非视频时，是我们不愿意看到的。我的解决办法是这样的：当我们需要播放的时候提前初始化，也就是在播放之前设置width:1px；然后play()，这样视频就已经播放完毕并初始化了。那么当你需要再玩的时候，再play()的时候就不会发生了，控件会拉伸。“去掉”android下的播放控制栏才是重头戏。相信这个问题已经困扰了无数前端开发者。在搜索这个问题的解决方案时，几乎所有的文章都告诉你，在android下，播放器控件是不能走的。其实好像是这样，但是看了故宫穿越H5和吴亦凡的H5，你会发现android下没有控制栏。当初看到那些H5视频的时候，并没有看出他们的内容有多新颖，传播的有多广。第一次测试android下的兼容性问题，发现没有出现控制栏。研究了半天没成功，在一个技术贴里看到：因为是腾讯自己的项目，微信是腾讯自己的，他们在浏览器做了一些配置，对自己出的H5有“优待”他们，以保证视频的顺利“伪装”。上面的说法我还没有真正验证过，不过好像是这样的。很庆幸自己做的视频项目也是腾讯的。其实我有机会向他们证实上面的说法，但即便如此，也只有腾讯的项目才有这样的解决方案，这对广大开发者来说似乎太不公平了。我正在尝试找到删除播放控件的解决方案。以下是我花了很多时间寻找的解决方案。看到看起来很简单，没有那么高大上，但是确实解决了问题，分享给大家：我这里只看android的情况，ios基本没有问题，就忽略了。试机android版本：5.1首先我们把H5视频网址嵌入到自己的页面中，你会发现播放器确实出现了。如下图所示怎么办？如果不是腾讯自己的项目，就没有别的办法了吗？我查找了更多资料后，发现了一个细节。控制栏始终位于底部。能不能把视频放大一点，把控制条移到浏览窗口外面，这样我就看不到了。于是我将视频的宽高放大到120%-----控制条神奇地“消失”了（实际上是被推出了窗外），真是惊喜。具体思路和实现如下：将video标签外包给html中的一层，