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

Posted kymming

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

　　

以上是关于video全屏视频背景适配不同分辨率的主要内容，如果未能解决你的问题，请参考以下文章

背景视频css（非全屏）

使用媒体查询隐藏 HTML5 视频

Android全面屏(长屏)闪屏背景拉伸问题解决

html5 中的 video 如何隐藏底部的全屏按钮或控制条

关于video标签移动端开发遇到的问题，获取视频第一帧，全屏，自动播放，自适应等问题

跳出小程序 video组件 卡顿黑屏全屏等坑