Browse Source

操作视频 最新版

MS-CIAZDCOIXVRW\Administrator 3 năm trước cách đây
mục cha
commit
0806bbf3ed
10 tập tin đã thay đổi với 92 bổ sung0 xóa
  1. BIN
      cover.jpg
  2. BIN
      electricity.mp4
  3. BIN
      face.mp4
  4. BIN
      hotwater.mp4
  5. BIN
      nav-1.png
  6. BIN
      qrcode.mp4
  7. BIN
      schoolcard.mp4
  8. BIN
      tempcard.mp4
  9. 26 0
      videos.css
  10. 66 0
      videos.html

BIN
cover.jpg


BIN
electricity.mp4


BIN
face.mp4


BIN
hotwater.mp4


BIN
nav-1.png


BIN
qrcode.mp4


BIN
schoolcard.mp4


BIN
tempcard.mp4


+ 26 - 0
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;
+}

+ 66 - 0
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>