createjs技术博客

大家做H5页面的时候想必都会遇到过一个问题，那就是使用video标签的时候在移动端或者微信上会默认弹出外置的播放器，使很多特效页面无法完成。但是别人的页面却可以，比如著名的薛之谦的页面：http://game.qq.com/act/a20161121xzq/?ADTAG=tencent.h5

这是什么原因呢？懂的人都知道，这是腾讯的白名单，白名单内的地址可以使用内置的播放器进行播放，可惜现在腾讯已经关闭了白名单的申请，值得注意的是ios并不影响（ios只需要设置webkit-playsinline="true"），影响的主要是安卓。那怎么才能在安卓下也能播放呢？好在微信的X5内核经过了几代版本迭代，推出了x5-video-player-type="h5" 和 x5-video-player-fullscreen="true"属性，这个可以让网页在所谓“同层播放器”中播放，可以解决安卓播放视频弹出默认框的问题。

接下来，我放出一个demo：http://www.ajexoop.com/test/embedVideoTest/test.html

（我的服务器网速只有100k，测试视频有2m，所以大家看demo的时候耐心等等）

大家可以用安卓机测试一下，点测试的时候，依然会弹一个框，但是弹出来后发现，按钮是在视频上面了，也就是说，修改后在安卓机上点击视频播放弹出的不是默认播放器，而是同层播放器。我们也可以叫他全屏层播放器。虽然说体验还是怪怪的，但是tgideas那种视频交互页面已经可以实现了。

代码很简单就是这样：

<video id="myvideo" style="object-fit: fill; width: 750px; height: 1206px; z-index: 0;position:fixed " autoplay="autoplay" playsinline="true" webkit-playsinline="true" x-webkit-airplay="allow"
       airplay="allow" loop="loop"x5-video-player-type="h5" x5-video-player-fullscreen="true" x5-video-orientation="portrait"  src="video/1.mp4" width="750" height="1206"></video>

那么能不能做到不弹全屏层，在安卓机上内置播放呢？这个本人找了很多资料得到的答案是，只有腾讯白名单可以，白名单外还是要是用“同层播放器”。（随着时间的推移可能会放开）

另外还有一个，大家经常问的问题，那就是能不能进网页自动播放视频，这个答案也是否定的。进网页如果可以自动播放视频，会导致用户流量浪费，或者扫码后直接播放一些嘿嘿嘿的视频。这些都不是用户想看到的，所以现在手机的浏览器，包括别的一些内核，自动播放视频的功能都是无法实现的。

相关资料考证:凹凸实验室