解决安卓机在微信上播放视频有广告问题

其实这个问题困扰了我很久，初到公司之初就尴尬了，

还跟公司的几个大牛一起探讨过，后来发现连腾讯官方都说“我们就是这样提供了一个需求满足而已”，所以最终也就不了了之了。

但随后视频播放的需求并没有减少，反而动不动就说：“动画做不出来？那就放视频吧”...心中草泥马狂奔，也只能温馨提醒，安卓机会有广告的...

结局不会有任何改变，来吧，canvas 绘画模拟视频播放，掉帧什么的就尽量减少视频大小吧。

 

而意料之外的，锤子公司出品的 H5(链接) 帮助了我。也是意料之外的，这种方法竟然会管用。

当初面临的几个问题有：1. 视频播放自动就全屏了。2. 播放完毕需要用户点击退出播放器。3. 播放完毕会显示那种你懂的广告。4. 视频无法自动播放

虽然 canvas 视频能避免上述的一部分问题，但要么损画质压缩，要么掉帧严重，你选一个吧...

今天所说的解决办法也并不能避免上述所有问题，但可谓是个中规中矩的办法，看看就知道了：

<style>
.video-box, .cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.video-box {
    display: none;
    z-index: -1;
}
.video-box.on {
    z-index: 0;
    display: block;
}
</style>

<div class="cover"></div>
<div class="video-box">
    <video id="example_video_1" src="1.mp4" class="video" width="100%" height="100%" preload x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline="true" playsinline="true"></video>
</div>

<script>
var myPlayer = $('#example_video_1')[0];
function PLAY() {
    myPlayer.play();
    $(myPlayer).on("ended", END);
}
function END() {
    $('.video-box').removeClass('on');
}
$('.cover').on('click', function(){
    $('.video-box').addClass('on'); PLAY();
});
</script>

一个是添加 x5-video-player-type 和 playsinline 等  html5 属性，

一个是视频盒子的显隐问题，以前用过直接 none 并不行，哪知加个 z-index 反而可以了，很巧妙，很神奇...