video全屏视频背景适配不同分辨率

需求：

给到一段视频，首屏要求铺满整个屏幕，并且适配不同分辨率。

解决思路：

获取当前视口宽高，调整视频宽高比进行填充，调整视频窗口位置以水平居中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>video_demo</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.js"></script>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .pageIndex {
        width: 100%;
        height: 100%;
        position: relative;
        background-color: #0f0f12;
    }

    .videobox {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .pageIndex .fullvid {
        position: absolute;
        width: 100%;
        left: 50%;
        margin-left: -50%;
        top: 0px;
        overflow: hidden;
        background-color: #0f0f12;
    }
</style>

<body>
    <div class="page pageIndex">
        <div class="fullvid">
            <div class="videobox">
                <video muted="muted" loop="loop" autoplay="autoplay" height="100%" width="100%">
                    <source src="https://static.web.sdo.com/jijiamobile/pic/ff14/ffweb850/vindex0130_2.mp4?123" type="video/mp4">
                </video>
            </div>
        </div>
    </div>
</body>
<script>
    var n = document.documentElement.clientHeight,
        e = document.documentElement.clientWidth,
        t = n / e;
    $(".page,.fullvid").height(n);
    // 9/16=0.5625视频宽高比
    if (t > .5625) {
        $(".videobox").width(n / .5625);
        $(".videobox").height(n);
        $(".videobox").css("marginLeft", 0 - (n / .5625 - e) / 2);
        $(".videobox").css("marginTop", 0);
    }
    else if (t < .5625) {
        $(".videobox").width(e);
        $(".videobox").height(.5625 * e);
        $(".videobox").css("marginLeft", 0);
        $(".videobox").css("marginTop", 0 - (.5625 * e - n) / 2);
    }
    else {
        $(".videobox").width(e);
        $(".videobox").height(n);
        $(".videobox").css("marginLeft", 0);
        $(".videobox").css("marginTop", 0);
    }
</script>

</html>

　　

posted @ 2020-04-15 23:43  宫圆薰  阅读(1901)  评论(0)    收藏  举报