解決安卓機在微信上播放視頻有廣告問題

其實這個問題困擾了我很久，初到公司之初就尷尬了，

還跟公司的幾個大牛一起探討過，后來發現連騰訊官方都說“我們就是這樣提供了一個需求滿足而已”，所以最終也就不了了之了。

但隨后視頻播放的需求並沒有減少，反而動不動就說：“動畫做不出來？那就放視頻吧”...心中草泥馬狂奔，也只能溫馨提醒，安卓機會有廣告的...

結局不會有任何改變，來吧，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 反而可以了，很巧妙，很神奇...