首页 前端知识 CSS3及Javascript实现网页视频背景居中并自动拉伸

CSS3及Javascript实现网页视频背景居中并自动拉伸

2024-01-27 00:01:31 前端知识 前端哥 683 427 我要收藏

最近笔者在写一个个人主页时碰到了一个问题,就是希望用视频作背景但不能实现随窗口大小自动拉伸并居中,经过学习研究,笔者最后总结了两种方法实现,分别是css3的新属性和JavaScript实现。

CSS3

首先声明一下追求的效果:视频居中,并且尽可能使视频更多内容能显示。

容器(div) > 视频(video)
容器css设置为

    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;

CSS3新增了object-fit属性,属性值有:fill、contain、cover等,三者是否能满足要求?可以和笔者一起测试一下。(笔者用的视频宽高为1080*1920)

视频css若是设置为:

.video_box{
	position: absolute;
	//设置居中显示
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); 
    
    object-fit: fill; //contain和cover其实是一样的效果
}

因为视频宽高太大所以直接以原比例居中填充了容器,使得一部分内容被裁剪了,很明显不满足要求。那么我们给视频加上宽高的限制。

.video_box > video{
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); 
    height: 100%;
    width: 100%;
    object-fit: fill; 
}

这里注意宽高限制都要加上,若是少一个效果将会偏向满足另一个。此时很明显有问题,视频会被拉伸来适应容器大小,使得视频显示失去比例,fill不符合我们的需求。
若是使用contain,则将会尽可能满足高度与容器相同而宽度按原比例,也不满足要求。
而cover则能很好的满足我们的要求。

.video_box > video{
	position: absolute;
	left: 50%;
    top: 50%;
    transform: translate(-50%,-50%); 
    height: 100%;
    width: 100%;
    object-fit: cover; 
}

Javascript

其实分析要求后的大概意思就是,尽量满足视频宽或高中至少一项符合容器宽或高,另一项必须按原比例拉伸至至少充满容器。那么可以写出以下JS代码:

        window.addEventListener('resize',function() {
            var h = window.innerHeight;
            var w = window.innerWidth;
            var bg = document.querySelector('.video_box video');
            if(w / h > 1920 / 1080) { //1920*1080为视频宽高比
                bg.className = 'v_w';
            } else {
                bg.className = 'v_h';
            }
        })

css设置为

.v_w{
    width: 100%;
    /* height: 100%; */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: block;
}
.v_h{
    /* width: 100%; */
    height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: block;
}

思路为,若是宽高比过大则满足宽度适配容器,如果宽高比过小就满足高度适配容器。
但还有一点小问题,在首次加载并且在页面大小改变前js都不会执行,所以再加上一个onload(‘load’)事件使第一次打开页面后也能应用宽高设置。完整js代码为:

		window.onload = function() {
            var h = window.innerHeight;
            var w = window.innerWidth;
            var bg = document.querySelector('.bg video');
            if(w / h > 1920 / 1080) {
                bg.className = 'v_w';
            } else {
                bg.className = 'v_h';
            }
        }
        window.addEventListener('resize',function() {
            var h = window.innerHeight;
            var w = window.innerWidth;
            var bg = document.querySelector('.bg video');
            if(w / h > 1920 / 1080) {
                bg.className = 'v_w';
            } else {
                bg.className = 'v_h';
            }
        })

js代码为笔者拙见,若有更好的实现方法欢迎多与笔者交流!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/526.html
标签
音视频
评论
发布的文章

06-jquery函数

2024-02-06 15:02:47

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!