HTML中加入视频播放及调节视频大小位置等比例那些事

需求：视频在一个div中自动播放并作为背景，该视频必须完全填充在该div中，视频不能溢出div，HTML中加入视频很简单加一个<video></video>即可现在要设置视频为背景，上层还有图片、文字、等；视频width、height大小和所存放视频的div设置的width、height大小不同，视频可能会出现不是理想的效果比如：这时视频wid...

文章共1,183字 · 阅读需要大约4分钟

一键AI生成摘要，助你高效阅读

问答

superleedev

33778人浏览 · 2019-12-19 15:37:47

superleedev · 2019-12-19 15:37:47 发布

需求：视频在一个div中自动播放并作为背景，该视频必须完全填充在该div中，视频不能溢出div，

HTML中加入视频很简单加一个<video> </video>即可

现在要设置视频为背景，上层还有图片、文字、等；

视频width、height大小和所存放视频的div设置的width、height大小不同，视频可能会出现不是理想的效果

比如：

这时视频width和weight设置为100%，已经到达视频原有的最大尺寸，但是还无法完全覆盖我们的div，所以现在要设置视频Video的属性和其父级DIV的属性：

 .video_back {
            /*设置视频最小宽度和高度 这个设不设置没有什么影响 */
            /*min-width: 100%;
            min-height:100%;*/
            /**/
            width: 100% !important;
            height: 100%;
            /*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。可以根据实际情况修改*/
            position: absolute;
            /*这里我试了一下好像只要是矩形的四个角的的点都行,也就是说right:0;bottom:0;也可以*/
            left: 0;
            top: 0;
            /*将视频放在元素的堆叠顺序最底层，以防覆盖其他东西*/
            z-index: -9999;
            /*被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。*/
            object-fit: fill;
        }
        #parent{
            position:absolute;
        }

几个重要的设置：

视频样式中的：position:absolute；这是让视频相对于父级div生成绝对定位；
z-index：-9999；这是让视频在堆叠顺序的最底层，作为背景；
object-fit：fill；视频完全填充到div中的关键！！！！
父级设置样式position:absolute 生成相对定位的元素，相对于其正常位置进行定位。

视频其他小属性

muted 静音播放
autoplay=autoplay；打开时自动播放；
loop=loop；循环播放
constrol 不显示视频播放框

最终效果：

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频背景网页</title>
    <style type="text/css">
        .video_back {
            /*设置视频最小宽度和高度*/
            /*min-width: 100%;
            min-height:100%;*/
            /**/
            width: 100% !important;
            height: 100%;
            /*生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。可以根据实际情况修改*/
            position: absolute;
            /*这里我试了一下好像只要是矩形的四个角的的点都行,也就是说right:0;bottom:0;也可以*/
            left: 0;
            top: 0;
            /*将视频放在元素的堆叠顺序最底层，以防覆盖其他东西*/
            z-index: -9999;
            /*被替换的内容正好填充元素的内容框。整个对象将完全填充此框。如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。*/
            object-fit: fill;
        }
        #parent{
            position:absolute;
        }
        .wen {
            font-size: 30px;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="parent" style="width:1920px;height:1080px;">
        <!--
    autoplay	autoplay如果出现该属性，则视频在就绪后马上播放。
    controls	controls如果出现该属性，则向用户显示控件，比如播放按钮。
    loop	loop如果出现该属性，则当媒介文件完成播放后再次开始播放。
    muted	muted规定视频的音频输出应该被静音。
    poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
    preload	preload
    如果出现该属性，则视频在页面加载时进行加载，并预备播放。
    如果使用 "autoplay"，则忽略该属性。
    src	 url要播放的视频的 URL。
    width	pixels设置视频播放器的宽度。
    height	pixels设置视频播放器的高度。-->
        <video class="video_back" src="/img/yundun.mp4" muted autoplay="autoplay" loop="loop">
            您的浏览器不支持
        </video>
        <div class="wen">这是视频的上浮文字</div>
    </div>
</body>
</html>