想同时播放四个本地视频：
- 四宫格；
- 自适应，即放缩浏览器时，四宫格也跟着放缩；
- 尽量填满页面（F11 浏览器全屏时可以填满整个屏幕）。
在 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>test</title>
<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">2</div> <!-- 占位框 -->
<div class="item">3</div> <!-- 占位框 -->
<video width=100% height=100% controls muted>
<source src="D:/王也踏青.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
References
- HTML <video> Tag
- CSS–九宫格布局(自适应)–方法/教程/实例
- CSS Grid 网格布局实现自适应9宫格
- CSS Grid 网格布局教程
- CSS Units
