h5 video标签安卓微信视频全屏

https://x5.tencent.com/tbs/guide/web/x5-video.html

https://blog.csdn.net/u011384023/article/details/79669902 

推荐看以上两个博客弄懂基本知识。下面代码已经实现在安卓微信视频的全屏播放。

基本属性如下：

<video
  id="videoALL"
  src="video/01.mp4"
  poster="images/1.jpg" /*视频封面*/
  preload="auto"
  webkit-playsinline="true" /*这个属性是ios 10中设置可以
                     让视频在小窗内播放，也就是不是全屏播放*/
  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/
  x-webkit-airplay="allow"
  x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏设置，
                     设置为 true 是防止横屏*/>
  x5-video-orientation="portraint" /*播放器支付的方向，
                     landscape横屏，portraint竖屏，默认值为竖屏*/
  style="object-fit:fill"

loop="loop"/*循环播放（不写不循环）*/

controls="controls" /*显示控制按键（不写不显示）*/

</video>

注意：一定要再<video>控件外加div，并且设置其z-index属性，不然其他控件将不能显示，而且没有功能

<style>
    html,body{
        margin: 0;
        padding: 0;
        width: 6.4rem;
        height: 12.5rem;
        position: relative;
    }
    .vbox{
        width: 6.4rem;
        height: 12.5rem;
        position: absolute;
        z-index: -2;
    }
    #video{
        width: 6.4rem;
        height: 12.5rem;
    }
    .fbox{
        width: 6.4rem;
        height: 12.5rem;
        position: absolute;
        z-index: 2;
    }
    .btn{
        width: 1rem;
        height: 1rem;
        background: #f00;
        margin: 4rem auto 0;
    }
</style>

<div class="vbox">
    <video id="video" loop webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" src='http://img.cdn.funqgame.com/video/rlr1.mp4'></video>
</div>
<div class="fbox">
    <div class="btn"></div>
</div>


<script>
    var bo = true;
    var vid = document.getElementById("video");
    $(".btn").click(function(){
        if(bo){
            vid.play();
            bo = false;
        }else{
            vid.pause();
            bo = true;
        }
    });
</script>