想同时播放四个本地视频：
- 四宫格；
- 自适应，即放缩浏览器时，四宫格也跟着放缩；
- 尽量填满页面（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
