禁止video在移动端全屏播放

只需要添加3个属性即可:

<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>

 

posted @ 2020-05-29 15:48  宫圆薰  阅读(385)  评论(0编辑  收藏  举报