手机端原生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 标签

手机端原生H5video 和QQ浏览器兼容性相关推荐

用谷歌还是火狐？手机端还是另外选择其他浏览器吧
很多人都知道谷歌浏览器的用户量排第一,国外浏览器市场主要以Chrome为主.火狐浏览器因其可安装插件多,同步书签方便等优势被很多人喜爱.那么,在国内使用谷歌浏览器还是火狐浏览器比较好?可能一部分人这两 ...
html手机端背景显示不全,手机浏览器打开PC端网站，背景显示不全怎么办？
原标题:手机浏览器打开PC端网站,背景显示不全怎么办? 随着移动互联网的发展,大多数企业在制作网站的时候,为了兼容各种设备,会制作出PC端.移动端二种版,根据不同的设备跳转到不同的网站,从而实现用户体 ...
手机端PC端判断微信浏览器支付宝浏览器判断
js判断浏览器是否手机端PC端 (补充是否微信浏览器支付宝浏览器其他浏览器) 效果图如下 <!DOCTYPE html> <html lang="en">& ...
限制网页只能从移动手机端打开不能从电脑浏览器打开
如何限制电脑PC端访问Web页面,只能手机端才能访问 HTML添加JS代码 var system = {}; var p = navigator.platform; var u = navigator ...
调用手机数字键盘,QQ浏览器兼容性（输入一个数字，键盘就会隐藏的问题）
调用手机数字键盘,仅需要加上type="number"即可,现在大部分手机浏览器使用这个方法都可以解决. 部分手机需要加上 pattern="[0-9]*" ...
手机端通过软件Es文件浏览器访问Linux服务器文件（局域网或远程服务器）
知识点: 1. 手机客户端Es文件浏览器 2. Sftp 3. ftp 步骤: 1.在Linux系统中,用命令方式输入ipconfig命令获取该服务器的ip地址为192.168.20.104 2.用手 ...
linux是手机端还是电脑端,判断浏览器用户端是PC还是移动设备的方法
Server端(ASP.NET)判断用户端是PC还是移动设备的方法: If Request.Browser.IsMobileDevice Then Response.Write("Reque ...
js判断当前浏览器的环境是微信、pc、还是手机端非微信环境
1. 判断浏览器是pc设备还是移动设备 if(window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android ...
手机端设置缩放的解决方法和遇到的UC浏览器的坑
对于手机端来说,有时候h5界面是要禁止放大和缩小的. 那么如何解决这个问题呢,话不多说,我们直接说解决方法: 在index的首页之中,有把meta标签改成如下形式,就可以将用户缩放功能关闭了. < ...

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

手机端原生H5video 和QQ浏览器兼容性相关推荐

最新文章

热门文章

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

手机端原生H5video 和QQ浏览器 兼容性相关推荐

最新文章

热门文章

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

手机端原生H5video 和QQ浏览器兼容性相关推荐