手机端原生H5video 和QQ浏览器 兼容性

<ul class="pho_ved_list" id="photo">
    <?php $index=0;?>
    <?php if (isset($show) && !empty($show)): ?>
        <?php foreach ($show as $val): ?>
            <li class="" style="width: 33.33%;overflow:hidden;height:65px;margin-top:5px;padding:0; overflow: hidden;position: relative;">
                <img class="videoImg vedio-<?php echo $index ?>" style="z-index: 100;width:100%;padding-right:6.5px;" src="http://cdn.test.baonahao.com/bnhnew/img/plyer.png"  alt="">
                <video  width="100%" height="100%" id="vedio-<?php echo $index++ ?>">
                    <source src="<?= $val['url'] ?>" type="video/mp4" />
                </video>
            </li>
        <?php endforeach; ?>
    <?php endif; ?>
</ul>

//所有的视频绑定点击事件
$(".pho_ved_list li .videoImg").on("tap",function(){
    //当前的视频元素
    var video = $(this).siblings("video")[0];
    //播放当前
    video.play();
    //全屏当前
    video.webkitEnterFullScreen()
    //退出监听
    video.addEventListener("webkitfullscreenchange", function(e) {
        if (!document.webkitIsFullScreen) {
            //退出全屏关闭视频
            $(video).css('display',"none");
        };
    });
    //qq浏览器退出监听
    video.addEventListener("x5videoexitfullscreen", function(){
        $(video).css('display',"none");
    })
});

手机端原生H5video 和QQ浏览器 兼容性

首先把事件放到li上，

li里面有个img标签（遮罩层） z-index 到顶层，

点击LI找到对应的video标签 触发播放 （全屏）

然后 分别监听 webkit 内核的浏览器 和QQ浏览器（所谓的X5内核）的退出全屏事件  

最后-----

退出全屏 然后隐藏video 标签