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

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

還跟公司的幾個大牛一塊兒探討過，後來發現連騰訊官方都說「咱們就是這樣提供了一個需求知足而已」，因此最終也就不了了之了。

但隨後視頻播放的需求並無減小，反而動不動就說：「動畫作不出來？那就放視頻吧」...心中草泥馬狂奔，也只能舒適提醒，安卓機會有廣告的...

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