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

最新推荐文章于 2024-02-26 10:33:10 发布

weibo392

最新推荐文章于 2024-02-26 10:33:10 发布

阅读量5.2k

点赞数

文章标签： H5 video QQ浏览器兼容性

本文链接：https://blog.csdn.net/weibo392/article/details/73536294

版权

<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");
    })
});