videos.html 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title></title>
  6. <link rel="stylesheet" href="./videos.css">
  7. </head>
  8. <body>
  9. <div class="header">
  10. <div>
  11. <img src="./nav-1.png" alt="南昌交通学院">
  12. </div>
  13. </div>
  14. <div class="body">
  15. <div class="body-item">
  16. <video controls src="https://jtishfw.ncjti.edu.cn/guide/electricity.mp4" poster="./cover.jpg"></video>
  17. <p>电费充值使用流程</p>
  18. </div>
  19. <div class="body-item">
  20. <video controls src="https://jtishfw.ncjti.edu.cn/guide/face.mp4" poster="./cover.jpg"></video>
  21. <p>人脸采集使用流程</p>
  22. </div>
  23. <div class="body-item">
  24. <video controls src="https://jtishfw.ncjti.edu.cn/guide/hotwater.mp4" poster="./cover.jpg"></video>
  25. <p>热水洗浴使用流程</p>
  26. </div>
  27. <div class="body-item">
  28. <video controls src="https://jtishfw.ncjti.edu.cn/guide/qrcode.mp4" poster="./cover.jpg"></video>
  29. <p>校园码使用流程</p>
  30. </div>
  31. <div class="body-item">
  32. <video controls src="https://jtishfw.ncjti.edu.cn/guide/schoolcard.mp4" poster="./cover.jpg"></video>
  33. <p>学生卡领取使用流程</p>
  34. </div>
  35. <div class="body-item">
  36. <video controls src="https://jtishfw.ncjti.edu.cn/guide/tempcard.mp4" poster="./cover.jpg"></video>
  37. <p>临时卡领取使用教程</p>
  38. </div>
  39. <!-- <div class="body-item">
  40. <video controls src="https://jtishfw.ncjti.edu.cn/guide/tuition.mp4" poster="./cover.jpg"></video>
  41. <p>学费在线缴纳使用教程</p>
  42. </div> -->
  43. </div>
  44. </body>
  45. <script>
  46. var videos = document.getElementsByTagName('video');
  47. for (var i = videos.length - 1; i >= 0; i--) {
  48. (function () {
  49. var p = i;
  50. videos[p].addEventListener('play', function () {
  51. pauseAll(p);
  52. })
  53. })()
  54. }
  55. function pauseAll(index) {
  56. for (var j = videos.length - 1; j >= 0; j--) {
  57. if (j != index) videos[j].pause();
  58. }
  59. }
  60. </script>
  61. </html>