vor 3 Jahren · 0806bbf3ed
--- a/cover.jpg
+++ b/cover.jpg
--- a/electricity.mp4
+++ b/electricity.mp4
--- a/face.mp4
+++ b/face.mp4
--- a/hotwater.mp4
+++ b/hotwater.mp4
--- a/nav-1.png
+++ b/nav-1.png
--- a/qrcode.mp4
+++ b/qrcode.mp4
--- a/schoolcard.mp4
+++ b/schoolcard.mp4
--- a/tempcard.mp4
+++ b/tempcard.mp4
--- a/videos.css
+++ b/videos.css
@@ -0,0 +1,26 @@
 
																+.header {
															
 
																+    width: 100%;
															
 
																+}
															
 
																+.header img {
															
 
																+    width: 100%;
															
 
																+}
															
 
																+.body {
															
 
																+    width: 100%;
															
 
																+    background-color: #fff;
															
 
																+}
															
 
																+.body-item {
															
 
																+    display: inline-block;
															
 
																+    margin:20px 2.3%;
															
 
																+    width: 45%;
															
 
																+    background-color: skyblue;
															
 
																+
															
 
																+}
															
 
																+.body-item video {
															
 
																+    width: 100%;
															
 
																+    height: 600px;
															
 
																+    overflow: hidden;
															
 
																+}
															
 
																+.body-item p {
															
 
																+    text-align: center;
															
 
																+    font-size: 40px;
															
 
																+}
															
--- a/videos.html
+++ b/videos.html
@@ -0,0 +1,66 @@
 
																+<!DOCTYPE html>
															
 
																+<html>
															
 
																+
															
 
																+<head>
															
 
																+	<meta charset="utf-8">
															
 
																+	<title></title>
															
 
																+	<link rel="stylesheet" href="./videos.css">
															
 
																+</head>
															
 
																+
															
 
																+<body>
															
 
																+	<div class="header">
															
 
																+		<div>
															
 
																+			<img src="./nav-1.png" alt="南昌交通学院">
															
 
																+		</div>
															
 
																+	</div>
															
 
																+	<div class="body">
															
 
																+		<div class="body-item">
															
 
																+			<video controls src="https://jtishfw.ncjti.edu.cn/guide/electricity.mp4" poster="./cover.jpg"></video>
															
 
																+			<p>电费充值使用流程</p>
															
 
																+		</div>
															
 
																+		<div class="body-item">
															
 
																+			<video controls src="https://jtishfw.ncjti.edu.cn/guide/face.mp4" poster="./cover.jpg"></video>
															
 
																+			<p>人脸采集使用流程</p>
															
 
																+		</div>
															
 
																+		<div class="body-item">
															
 
																+			<video controls src="https://jtishfw.ncjti.edu.cn/guide/hotwater.mp4" poster="./cover.jpg"></video>
															
 
																+			<p>热水洗浴使用流程</p>
															
 
																+		</div>
															
 
																+		<div class="body-item">
															
 
																+			<video controls src="https://jtishfw.ncjti.edu.cn/guide/qrcode.mp4" poster="./cover.jpg"></video>
															
 
																+			<p>校园码使用流程</p>
															
 
																+		</div>
															
 
																+		<div class="body-item">
															
 
																+			<video controls src="https://jtishfw.ncjti.edu.cn/guide/schoolcard.mp4" poster="./cover.jpg"></video>
															
 
																+			<p>学生卡领取使用流程</p>
															
 
																+		</div>
															
 
																+		<div class="body-item">
															
 
																+			<video controls src="https://jtishfw.ncjti.edu.cn/guide/tempcard.mp4" poster="./cover.jpg"></video>
															
 
																+			<p>临时卡领取使用教程</p>
															
 
																+		</div>
															
 
																+		<!-- <div class="body-item">
															
 
																+			<video controls src="https://jtishfw.ncjti.edu.cn/guide/tuition.mp4" poster="./cover.jpg"></video>
															
 
																+			<p>学费在线缴纳使用教程</p>
															
 
																+		</div> -->
															
 
																+	</div>
															
 
																+</body>
															
 
																+
															
 
																+<script>
															
 
																+	var videos = document.getElementsByTagName('video');
															
 
																+	for (var i = videos.length - 1; i >= 0; i--) {
															
 
																+		(function () {
															
 
																+			var p = i;
															
 
																+			videos[p].addEventListener('play', function () {
															
 
																+				pauseAll(p);
															
 
																+			})
															
 
																+		})()
															
 
																+	}
															
 
																+	function pauseAll(index) {
															
 
																+		for (var j = videos.length - 1; j >= 0; j--) {
															
 
																+			if (j != index) videos[j].pause();
															
 
																+		}
															
 
																+	}
															
 
																+
															
 
																+</script>
															
 
																+
															
 
																+</html>