|
|
@@ -1,71 +1,116 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
+ <head>
|
|
|
+ <meta charset="utf-8" />
|
|
|
+ <title></title>
|
|
|
+ <link rel="stylesheet" href="./videos.css" />
|
|
|
+ </head>
|
|
|
|
|
|
-<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/poscard.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>
|
|
|
|
|
|
-<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/poscard.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/qianyue.mp4"
|
|
|
+ poster="./cover.jpg"
|
|
|
+ ></video>
|
|
|
+ <p>农商行签约流程</p>
|
|
|
+ </div>
|
|
|
+ <div class="body-item">
|
|
|
+ <video
|
|
|
+ controls
|
|
|
+ src="https://jtishfw.ncjti.edu.cn/guide/airConditioner.mp4"
|
|
|
+ poster="./cover.jpg"
|
|
|
+ ></video>
|
|
|
+ <p>共享空调操作使用教程</p>
|
|
|
+ </div>
|
|
|
+ <div class="body-item">
|
|
|
+ <video
|
|
|
+ controls
|
|
|
+ src="https://jtishfw.ncjti.edu.cn/guide/1.mp4"
|
|
|
+ poster="./cover.jpg"
|
|
|
+ ></video>
|
|
|
+ <p>新生操作视频</p>
|
|
|
+ </div>
|
|
|
+ <div class="body-item">
|
|
|
+ <video
|
|
|
+ controls
|
|
|
+ src="https://jtishfw.ncjti.edu.cn/guide/2.mp4"
|
|
|
+ poster="./cover.jpg"
|
|
|
+ ></video>
|
|
|
+ <p>在线缴费</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </body>
|
|
|
|
|
|
- <div class="body-item">
|
|
|
- <video controls src="https://jtishfw.ncjti.edu.cn/guide/qianyue.mp4" poster="./cover.jpg"></video>
|
|
|
- <p>农商行签约流程</p>
|
|
|
- </div>
|
|
|
- <div class="body-item">
|
|
|
- <video controls src="https://jtishfw.ncjti.edu.cn/guide/airConditioner.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>
|
|
|
+ <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>
|
