JavaScript + html + css实现视频播放九宫格1,4,6,9分屏（新手必看）_h5视频九宫格

作者：菜鸟追梦旅行 | 2024-02-16 22:49:14

踩

h5视频九宫格

文章结尾有效果图

一、引入Jquery(自行下载引入)

下载地址：https://jquery.com/download/
1

二、新建xx.html页面

2.1 引入Jquery

<script src="static/jQuery-v3.7.1.js"></script>

2.2 创建布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>九宫格布局1,4,6,9分屏切换</title>
	</head>
	<body>
		<!-- 左侧监控源 -->
		<div class="menuTitle"></div>
		<!-- 分屏切换按钮 -->
		<div class="switchToggle"></div>
		<!-- 视频容器 -->
		<div class="container"></div>
	</body>
	<script src="static/jQuery-v3.7.1.js"></script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3 生成左侧监控源列表

<div class="menuTitle">
	<ul class="treeList">
		<details open id="details">
			<summary style="line-height: 25px;">视频监控列表[10/12]</summary>
			<li>路况监控</li>
			<li>机房监控</li>
			<li>园区监控</li>
			<li>二楼卫生间监控</li>
		</details>
	</ul>
</div>
<style>
	body {
		background-color: aliceblue;
		font-family: 'Courier New', Courier, monospace;
		font-weight: 500;
	}
	.menuTitle {
		width: 15%;
		height: 80%;
		float: left;
		margin-top: 100px;
	}
	.treeLis {
		list-style-type: none;
		margin-left: -20px;
		cursor: pointer;
	}
	.treeList li {
		padding-left: 15px;
		line-height: 25px;
		cursor: pointer;
		font-size: 15px;
		color: #00a65a !important;
	}
</style>
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

4 生1，4，6，9分屏切换按钮

<div class="switchToggle">
	<button id="toggle1">单屏</button>
	<button id="toggle4">四分屏</button>
	<button id="toggle6">六分屏</button>
	<button id="toggle9">九分屏</button>
</div>
<style>
	.switchToggle {
		position: absolute;
		left: 42%;
		top: 5%;
	}
	button {
		border: 1px solid darkcyan;
		background-color: darkcyan;
		cursor: pointer;
		line-height: 30px;
		border-radius: 10%;
	}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

5 `生成视频播放容器并动态添加`

<!-- 视频容器 -->
<div id="container">
	
</div>
<script>
	$(document).ready(function() {
		// 初始化展示4宫格
		createGridLayout(toggle6);
	})
	// 定义不同的布局数组
	var toggle1 = [1]; //单屏
	var toggle4 = [1, 2, 3, 4]; //4分屏
	var toggle6 = [1, 2, 3, 4, 5, 6]; //6分屏
	var toggle9 = [1, 2, 3, 4, 5, 6, 7, 8, 9]; //9分屏
	// 根据不同的按钮点击事件，应用不同的布局
	document.getElementById("toggle1").addEventListener("click", function() {
		createGridLayout(toggle1);
	});
	document.getElementById("toggle4").addEventListener("click", function() {
		createGridLayout(toggle4);
	});
	document.getElementById("toggle6").addEventListener("click", function() {
		createGridLayout(toggle6);
	});
	document.getElementById("toggle9").addEventListener("click", function() {
		createGridLayout(toggle9);
	});
	// 动态创建视频容器
	function createGridLayout(layout) {
		var container = document.getElementById("container");
		// 清空容器
		container.innerHTML = "";
		// 动态创建class
		container.className = "play" + layout.length;
		// 根据布局创建视频元素并添加到容器中
		for (var i = 0; i < layout.length; i++) {
			var video = createVideoElement(layout[i]);
			var number = layout.length;
			switch (number) {
				case 1:
					video.className = "grid-item1";
					break;
				case 4:
					video.className = "grid-item4";
					break;
				case 6:
					video.className = "grid-item6";
					break;
				case 9:
					video.className = "grid-item9";
					break;
				default:
					video.className = "grid-item4";
					break;
			}
			container.appendChild(video);
		}
	}
	// 动态创建video标签
	function createVideoElement(id) {
		var video = document.createElement("video");
		video.id = "video" + id;
		video.src = "xxx.mp4"
		return video;
	}
</script>
<style>
<!-- 对应样式 -->
	#container {
		position: absolute;
		top: 12%;
		left: 21%;
		width: 55%;
		height: 66%;
		border: 1px solid darkseagreen;
	}
	.grid-item1 {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: #00a65a;
	}
	.grid-item4 {
		float: left;
		width: 50%;
		height: 50% !important;
		box-sizing: border-box;
		border: 1px dashed black;
		background-color: #00a65a;
	}
	.grid-item6 {
		float: left;
		width: 33.33%;
		height: 33.33% !important;
		box-sizing: border-box;
		border: 1px dashed black;
		background-color: #00a65a;
	}
	.grid-item6:first-child {
		float: left;
		width: 66.66%;
		height: 66.66% !important;
		box-sizing: border-box;
		border: 1px dashed black;
		background-color: #00a65a;
	}
	.grid-item9 {
		float: left;
		width: 33.33%;
		height: 33.33% !important;
		box-sizing: border-box;
		border: 1px dashed black;
		background-color: #00a65a;
	}
</style>

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

六完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>九宫格布局1,4,6,9分屏切换</title>
	</head>
	<style>
		body {
			background-color: aliceblue;
			font-family: 'Courier New', Courier, monospace;
			font-weight: 500;
		}
		.menuTitle {
			width: 15%;
			height: 80%;
			float: left;
			margin-top: 100px;
		}
		.treeList {
			list-style-type: none;
			margin-left: -20px;
			cursor: pointer;
		}
		.treeList li {
			padding-left: 15px;
			line-height: 25px;
			cursor: pointer;
			font-size: 15px;
			color: #00a65a !important;
		}
		.switchToggle {
			position: absolute;
			left: 42%;
			top: 5%;
		}
		button {
			border: 1px solid darkcyan;
			background-color: darkcyan;
			cursor: pointer;
			line-height: 30px;
			border-radius: 10%;
		}
		#container {
			position: absolute;
			top: 12%;
			left: 21%;
			width: 55%;
			height: 66%;
			border: 1px solid darkseagreen;
		}
		.grid-item1 {
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			background-color: #00a65a;
		}
		.grid-item4 {
			float: left;
			width: 50%;
			height: 50% !important;
			box-sizing: border-box;
			border: 1px dashed black;
			background-color: #00a65a;
		}
		.grid-item6 {
			float: left;
			width: 33.33%;
			height: 33.33% !important;
			box-sizing: border-box;
			border: 1px dashed black;
			background-color: #00a65a;
		}
		.grid-item6:first-child {
			float: left;
			width: 66.66%;
			height: 66.66% !important;
			box-sizing: border-box;
			border: 1px dashed black;
			background-color: #00a65a;
		}
		.grid-item9 {
			float: left;
			width: 33.33%;
			height: 33.33% !important;
			box-sizing: border-box;
			border: 1px dashed black;
			background-color: #00a65a;
		}
	</style>
	<body>
		<!-- 左侧菜单栏 -->
		<div class="menuTitle">
			<ul class="treeList">
				<details open id="details">
					<summary style="line-height: 25px;">视频监控列表[10/12]</summary>
					<li>路况监控</li>
					<li>机房监控</li>
					<li>园区监控</li>
					<li>二楼卫生间监控</li>
				</details>
			</ul>
		</div>
		<!-- 分屏切换按钮 -->
		<div class="switchToggle">
			<button id="toggle1">单屏</button>
			<button id="toggle4">四分屏</button>
			<button id="toggle6">六分屏</button>
			<button id="toggle9">九分屏</button>
		</div>
		<!-- 视频容器 -->
		<div id="container">
			
		</div>
	</body>
	<script src="static/jQuery-v3.7.1.js"></script>
	<script>
		$(document).ready(function() {
			// 初始化展示4宫格
			createGridLayout(toggle6);
		})
		// 定义不同的布局数组
		var toggle1 = [1]; //单屏
		var toggle4 = [1, 2, 3, 4]; //4分屏
		var toggle6 = [1, 2, 3, 4, 5, 6]; //6分屏
		var toggle9 = [1, 2, 3, 4, 5, 6, 7, 8, 9]; //9分屏
		// 根据不同的按钮点击事件，应用不同的布局
		document.getElementById("toggle1").addEventListener("click", function() {
			createGridLayout(toggle1);
		});
		document.getElementById("toggle4").addEventListener("click", function() {
			createGridLayout(toggle4);
		});
		document.getElementById("toggle6").addEventListener("click", function() {
			createGridLayout(toggle6);
		});
		document.getElementById("toggle9").addEventListener("click", function() {
			createGridLayout(toggle9);
		});
		// 动态创建视频容器
		function createGridLayout(layout) {
			var container = document.getElementById("container");
			// 清空容器
			container.innerHTML = "";
			// 动态创建class
			container.className = "play" + layout.length;
			// 根据布局创建视频元素并添加到容器中
			for (var i = 0; i < layout.length; i++) {
				var video = createVideoElement(layout[i]);
				var number = layout.length;
				switch (number) {
					case 1:
						video.className = "grid-item1";
						break;
					case 4:
						video.className = "grid-item4";
						break;
					case 6:
						video.className = "grid-item6";
						break;
					case 9:
						video.className = "grid-item9";
						break;
					default:
						video.className = "grid-item4";
						break;
				}
				container.appendChild(video);
			}
		}
		// 动态创建video标签
		function createVideoElement(id) {
			var video = document.createElement("video");
			video.id = "video" + id;
			video.src = "xxx.mp4"
			return video;
		}
	</script>
</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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178

效果图

四分屏
六分屏
九分屏

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/97449