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

在安卓手机，微信对于video标签的样式会统一变为他内置的样子，如何解决呢？

• html

1. 不要对video设置autoplay

2. 在video外层内置播放按钮，目的：可以方便监听进入全屏和退出全屏的状态，有什么用呢？首先咱们左上角是有操作按钮的，当进入全屏后，
   1）视频画面顶部内置了两个按钮：返回和操作，这个是无法移除的；
   2）播放按钮已经点过了，所以播放应该处于隐藏状态；当返回的时候又要出现播放按钮，此时就需要判断进入全屏和退出全屏了，当然这这是一个简单的例子，底部按钮可能也会受影响，根据具体显示效果，微调即可。

   
   未播放前初始状态
   播放后进入全屏状态

<button id="btn">播放</button>
<video id="video" x5-video-player-type="h5"  x5-video-player-fullscreen="true" src="http://vali.cp31.ott.cibntv.net/youku/6774449c7103e718ded87437b/03000801005B7BBEAC608C4003E8801E4E5A3C-66ED-4187-B184-9E4C829252EB.mp4?
sid=053906486000010007842_00_A2a3bc1df0750c4cfc6c4f4a433cac126&sign=2561592a0f7b2ab27b7fa8ffbfe9b572&ctype=50"></video>

• js

<script>
    var x = document.getElementById("btn");
    var v = document.getElementById("video");
 // 点击播放按钮播放视频 并进入全屏状态
    x.onclick= function () {
        v.play();
    };
// 进入全屏监听  视频自动播放并全屏
    v.addEventListener("x5videoexitfullscreen", function(){
        alert("exit fullscreen")
    });
    // 退出全屏监听 视频自动暂停并进入非全屏时候的样子
    v.addEventListener("x5videoenterfullscreen", function(){
        alert("enter fullscreen")
    });

</script>

• css

 <style>
        body{
            overflow: hidden; }
        *{
            margin: 0;
            padding: 0;}
        video{width:100%; display: block;
            background-color: #00f; z-index: 10; position: fixed; top:0px; left:0px; height: 100%;}
        #btn{position: fixed; z-index: 1000; top:10px; left: 10px;}
    </style>