преди 3 години · 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>