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

Posted 2023-04-06 yuanhangovo

最近笔者在写一个个人主页时碰到了一个问题，就是希望用视频作背景但不能实现随窗口大小自动拉伸并居中，经过学习研究，笔者最后总结了两种方法实现，分别是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代码为笔者拙见，若有更好的实现方法欢迎多与笔者交流！

http原理2

1.1前端语言

　　html--------设定网页上的内容

　　css-----美化用的，有坐标这东西，规划内容的显示位置，及图片的显示方式。

　　javascript-------网页上的shell代码

      （前面两个就可以做静态网页出来，）

静态网页？

　　　　纯粹HTML格式的网页（可以包含图片，视频，JS（前端功能实 现），CSS（样式）等）通常被称为“静态网页”。

静态资源-------图片和视频都是静态资源，

静态网页的优缺点：

　　　　1. 不需要数据库支持。

　　　　2.服务器端解析速度快

　　　　3.给服务器端造成的压力小

　　　　4.搜索引擎喜欢收录静态网页，不喜欢收录动态网页

　　　　5.静态网页是固定不变的，所以维护起来麻烦。

后端语言和前端是没有关系的。

企业里MySQL数据库会将写压力交给消息队列

动态网页？

的动态网页是与静态网页相对而言的，也就是说，动态网页的URL后缀不 是.htm,.html,.shtml,.xml,.js,.css等静态网页的常见后缀扩展名形式，而是 以.asp,.aspx,.php,.js,.do,.cgi等形式作为后缀的，并且一般在动态网页网址中会有标志性的符 号--“？，&”，此外，在大多数情况下后端都需要有数据库支持等。

动态网页资源特点：

1）网页扩展名后缀常见为：.asp,.aspx,.php,.jsp,.do,cgi等 2）网页一般以数据库技术为基础，大大降低了网站维护的工作量 3）采用动态网页技术的网站可以实现更多的功能，如用户注册，用户登录，在线调查，投 票，用户管理，订单管理，发博文等等 4）动态网页并不是独立存在于服务器上的网页文件，当用户请求服务器上的动态程序时，服 务器解析这些程序并可能读取数据库返回一个完整的网页内容。 5）动态网页中的“？”在搜索引擎的收录方面存在一定问题，搜索引擎一般不会从一个网站 的数据库中访问全部网页，或者出于技术等方面的考虑，搜索蜘蛛一般不会去抓去网址 中“？”后面的内容，因此在企业通过搜索引擎进行推广时，需要针对采用动态网页的网站做 一定的技术处理（伪静态技术），以便适应搜索因穷的抓取要求。 6）程序在服务器端解析，这相当于顾客点餐，饭店厨师做饭做菜，耗时长，效率低。由于程 序在服务端解析，因此，会消耗大量的CPU和内存，I/O等资源，并且多数还要读取数据库等 服务，因此，其访问效率远不如静态网页，在服务端解析动态程序的服务常见的有PHP引 擎，Java容器（tomcat,resin,jboss,weblogic）

有关动态网页的架构思想=======
一般来说，静态网页的性能效率是动态网页的10～30倍。且动态网站效率很差，并发能力 也很低，在高并发场景中，应尽可能转换成静态网页提供服务。动态转静态几乎是所有高 并发网站必备的架构方案思路，也是高级架构师的职责所在。 此外，动态转静态也要根据业务需求设计，例如，对于更新频繁的网站如果设计不好就可 能会产生数据不一致的情况，即用户看到的数据不是网站最新的内容，而是静态的内容。

web架构优化方案=======

 由于静态网页程序在客户端解析，大大降低了服务器端的访问压力，因此解析效率更高，在实 际高并发网站架构中，可以考虑把用户请求的数据解析后存成静态文件放于磁盘中或放于内存
中，来降低动态服务器的压力，节约企业成本，提升用户体验。

 -=--=-=-=控制好伪静态网页的存活周期是为了提升数据效率

////////////

1并发ip数：一个时间段内连接到服务器的ip数

 独立ip数的算法：1日志切割，每个文件每天都切割了。2.对第一列的ip去重。3.wc -l统计。

2.pv访问量、一个页面就是一个pv，大于真实的用户访问量。通常pv统计是由web工程师统计的。

算法：取正确的返回码。去掉静态资源。针对url不需要去重。

3.uv独立访客

一天时间内，相同的客户端访问同一网站只计算一次uv。

只要有用户访问，每个cookie的存活时间是一天。

 也不准，用户会删除cookie。一般统计会大于真实的情况。

 =========并发连接数=========

什么是并发连接？

网站服务器在单位时间内能够处理的最大连接数。

统计并发连接数-----------(两种)

　　　　netstat -an | grep ESTAB | wc -l

　　　　ss -an | grep ESTAB | wc -l    （后者出来的信息更准确）

ESTABLISHED并发连接，进入连接传输状态（三次握手成功）。