html用css grid实现自适应四宫格放视频

想同时播放四个本地视频：

四宫格；
自适应，即放缩浏览器时，四宫格也跟着放缩；
尽量填满页面（F11 浏览器全屏时可以填满整个屏幕）。

4grid

在 html 中放视频用 video 标签，参考 [1]；参考 [2,3] 用 css 的 grid 实现自适应九宫格的方法，grid 的介绍见 [3]。

Code

code base 是 [2] 的方案 1。
参考 [3] 用 * {...} 去除 padding、margin；单位 vh 详见 [5]；
默认黑背景（视频没有内容的地方黑边）；
视频默认静音：muted

doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>testtitle>
    <style>
		* {
			/* 去掉四围空白 */
			padding: 0;
			margin: 0;
			/* 黑背景 */
			background: #000000;
		}
		body {
			/* vw/vh：viewport 宽/高的 1% */
			height: 100vh;
			/* width: 100vw; */
		}
		.container {
			/* grid 布局的样式 */
			display: grid;
			width: 100%;
			height: 100%;
			/* 2x2，各占一半宽/高 */
			grid-template-columns: repeat(2, 50%);
			grid-template-rows: repeat(2, 50%);
			/* 宫格之间的间隔（以前是 grid-row/column-gap） */
			row-gap: 0;
			column-gap: 0;
		}
		.item {
			/* 这个只是 debug 用的示例框，看宫格内容的大小 */
			border: 1px solid red;
			color: red;
			text-align: center;
		}
    style>
head>

<body>
<div class="container">
	<video width=100% height=100% controls muted>
		<source src="D:/幺妹儿冯宝宝.mp4" type="video/mp4">
	video>
    <div class="item">2div> 
    <div class="item">3div> 
	<video width=100% height=100% controls muted>
		<source src="D:/王也踏青.mp4" type="video/mp4">
	video>
div>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

References

相关阅读:
LiftPool：双向池化操作，细节拉满，再也不怕丢特征了 | ICLR 2021
java环境安装与配置
Node版本管理工具——Nvm
《opencv学习笔记》-- 线性滤波：方框滤波、均值滤波、高斯滤波
Ubuntu 20.04源码安装sysbench 1.0.20，源码安装sysstat v12.7.2
利用iperf网络带宽测试工具看多线程及多核编程
libtorch c++ 定义全链接网络
SV--虚方法
unity面试八股文 - 常用工具与算法
Java版工程行业管理系统源码-专业的工程管理软件-提供一站式服务

原文地址：https://blog.csdn.net/HackerTom/article/details/134158954