html5 video 那些事

html5 播放视频现在已经不是一件很稀奇的事了，今天就来说说h5播放视频的那些事。

做前端的程序猿们都知道，页面加入video标签，就能轻松搞定网页播放视频这件事。同时，可以自定义播放控件的样式。

现今，全景视频的大潮来袭，各种炫酷。同时，浏览器也逐渐跟上脚步，利用canvas+webgl这样的技术，也可以在网页上播放全景视频，一款名为threejs的js插件，就能轻松搞定网页全景视频，而且，浏览器兼容方面也做得很好。

但是，以上，都是PC端的事情，现在，智能手机各式各样的都有，android，ios几乎占据整个手机系统市场。随之而来的就是各式各样的浏览器，什么QQ，火狐，360，海豚，欧鹏，谷歌……七七八八的，数都数不过来，现在连手机自带的浏览器，一些也不是原生的了，多多少少都加入了一些改造，然后，你就会发现，html5播放视频的时候，要么自动全屏，要么调用本地视频播放器，要么被拦截后给你套一个壳。最为常见的就是微信里面，人家给你分享一个网页，打开，里面有一段视频，你去播放，其实，已经被套上腾讯播放器的壳了，你暂停，给你跳广告。

好吧。拦截就拦截了，修改也就修改了，至少，还能播放，也没有照成多大的影响，满足一般用户的需求了。但是，对于前端人员来说，就会到处去百度，去搜索，“为什么video标签在pc端和手机端播放时不一致了”，"为什么被拦截，有没有解决方法等"。。。

然后，我就想，我不在页面上直接加入video标签，也不用video来播放了，用js去创建一个video，然后不加入页面，用canvas来画视频，会不会就可以绕过去了呢？于是乎，我就去尝试了，结论是:瞎扯淡，不行！！！

然后，只能默默地接受了，赶紧在技术上，被qiang jian好多次有木有。。。。。。

然而，随着全景视频的发展，这种拦截，给了开发人员致命的一刀。全景视频，完全不支持。如图：

浏览器

测试

百度浏览器

不支持

UC浏览器

不支持

QQ浏览器

不支持

谷歌浏览器

支持

360浏览器

不支持

猎豹浏览器

不支持

搜狗浏览器

不支持

欧鹏浏览器

支持

海豚浏览器

不支持

火狐浏览器

支持

魅族自带浏览器

不支持

以上，应该是比较常见的手机浏览器了，经过测试，仅有谷歌，欧鹏，火狐，没有去拦截video，从而在在上面做全景视频的播放。

事实上，这些个浏览器，为何不在订一个标准，如加入一个meta，可以使得浏览器不去拦截video呢？

以上，全属个人观点，如有不悦，勿喷。