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

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

  • 四宫格;
  • 自式应,即放缩浏览器时,四宫格也跟着放缩;
  • 尽量填满页面(F11 浏览器全屏时可以填满整个屏幕)。

html用css grid实现自适应四宫格放视频_第1张图片
在 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 black;
		}
    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>

References

  1. HTML
  2. CSS–九宫格布局(自适应)–方法/教程/实例
  3. CSS Grid 网格布局实现自适应9宫格
  4. CSS Grid 网格布局教程
  5. CSS Units

你可能感兴趣的:(乱搞,html,css,前端,视频,四宫格,自适应)