码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-04-16 00:48:36      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:mobile   pre   class   highlight   lang   oct   src   document   http   

需求:

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

解决思路:

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

<!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全屏视频背景适配不同分辨率

标签:mobile   pre   class   highlight   lang   oct   src   document   http   

原文地址:https://www.cnblogs.com/kymming/p/12709620.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!