x5微信内核浏览器video全屏方案（下）

对于视频宽高比是2:1视觉比较宽的视频来说，如果希望视频下面还想放一些评论列表，ios没问题，安卓这时候就需要改变视频进入全屏后的视频位置，假设说希望视频在顶部，怎么做呢？

• css

 <style>
        body {
            overflow: hidden;
        }

        * {
            margin: 0;
            padding: 0;
        }
      /*视频宽高一定要设100% 否则不会出现效果*/
        video {
            width: 100%;
            height: 100%;
            display: block;
            background-color: #ff0;
            position: fixed;
            top: 0px;
            left: 0px;
        }

        #btn {
            position: fixed;
            z-index: 2;
            top: 10px;
            left: 10px;
        }
        .btm-box{
            bottom: 0px;left: 0px; 
            z-index: 2;
            background-color:#00f; position: fixed;
        }
        
        .vcp-controls-panel{display: none;}
    </style>

• html, object-position，video的css属性是用来设置视频画面的位置（x,y），默认是居中的，这里是x 0,y 0，播放后如图1所示。

<button id="btn">播放</button>
<div class="btm-box">我是固定的哦!</div>
    <video  x5-video-player-type="h5" x5-video-player-fullscreen="true" 
src="你的视频地址" style="object-position:0px 0px;"></video>

• js

<script>
    var x = document.querySelector("#btn");
    var v = document.querySelector("video");
    x.onclick = function () {
            v.play();
    };
    // 进入全屏监听
    v.addEventListener("x5videoexitfullscreen", function () {
        alert("exit fullscreen")
    });
    // 退出全屏监听
    v.addEventListener("x5videoenterfullscreen", function () {
        alert("enter fullscreen")
    });