禁止video在移动端全屏播放

最新推荐文章于 2024-08-09 10:42:44 发布

maoge_666

最新推荐文章于 2024-08-09 10:42:44 发布

阅读量120

点赞数 2

文章标签：前端 js html5

本文链接：https://blog.csdn.net/maoge_666/article/details/140299596

版权

<video src="你的视频地址" controls="controls" loop="loop" id="v1" muted="muted" webkit-playsinline="" x5-playsinline="" playsinline="" poster="你的视频截图"></video>

区分pc和微端的视频播放规则：

<script>
    var media = document.getElementById("v1");
    var flag = false;
    media.onvolumechange = function () {
        if (media.muted == false && flag == false) {
            media.volume = 0.2;
            flag = true;
        }
    };
    function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];
        var flags = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flags = false;
                break;
            }
        }
        return flag;
    }
    if (!IsPC()) {
        media.autoplay = false;
        media.poster = "你的视频截图";
    }

</script>