monitor.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  7. <link rel="stylesheet" href="style/reset.css" />
  8. <link rel="stylesheet" href="style/public.css" />
  9. <link rel="stylesheet" href="style/monitor.css" />
  10. <link rel="stylesheet" href="font/iconfont.css" />
  11. <title>Document</title>
  12. </head>
  13. <body>
  14. <section class="s1">
  15. <div class="s-title">
  16. <h2>重点监控</h2>
  17. <span class="tag">迎宾大道中院士路路口</span>
  18. </div>
  19. <div class="tcdPageCode"></div>
  20. <main class="video-ctrl">
  21. <video
  22. id="testPlayer"
  23. poster=""
  24. controls
  25. playsInline
  26. webkit-playsinline
  27. autoplay="autoplay"
  28. >
  29. <source
  30. src="http://gz2play.95787.com/sx/gnFe37Och0oyb12RvJTMumpdG.m3u8"
  31. type="application/x-mpegURL"
  32. />
  33. </video>
  34. </main>
  35. <div class="m-detail">
  36. <div class="detail-left">
  37. <img src="./images/shexiangtou.png" alt="" />
  38. </div>
  39. <div class="detail-right">
  40. <div class="detail-item">
  41. <div class="di-l">设备编号</div>
  42. <div class="di-r">5</div>
  43. </div>
  44. <div class="detail-item">
  45. <div class="di-l">设备型号</div>
  46. <div class="di-r">iDS-2PT7T20BX-D</div>
  47. </div>
  48. <div class="detail-item">
  49. <div class="di-l">设备状态</div>
  50. <div class="di-r">正常</div>
  51. </div>
  52. <div class="detail-item">
  53. <div class="di-l">运行时长</div>
  54. <div class="di-r">56天18小时01分钟</div>
  55. </div>
  56. </div>
  57. </div>
  58. <div class="settting">
  59. <span>取消重点监控</span>
  60. </div>
  61. </section>
  62. <div class="line"></div>
  63. <section class="s2">
  64. <div class="s-title">
  65. <h2>重点监控</h2>
  66. <span class="tag">迎宾大道中院士路路口</span>
  67. </div>
  68. <main class="video-ctrl">
  69. <video
  70. id="testPlayer"
  71. poster=""
  72. controls
  73. playsInline
  74. webkit-playsinline
  75. autoplay="autoplay"
  76. >
  77. <source
  78. src="http://gz2play.95787.com/sx/gnFe37Och0oyb12RvJTMumpdG.m3u8"
  79. type="application/x-mpegURL"
  80. />
  81. </video>
  82. </main>
  83. <div class="m-detail">
  84. <div class="detail-left">
  85. <img src="./images/shexiangtou.png" alt="" />
  86. </div>
  87. <div class="detail-right">
  88. <div class="detail-item">
  89. <div class="di-l">设备编号</div>
  90. <div class="di-r">5</div>
  91. </div>
  92. <div class="detail-item">
  93. <div class="di-l">设备型号</div>
  94. <div class="di-r">iDS-2PT7T20BX-D</div>
  95. </div>
  96. <div class="detail-item">
  97. <div class="di-l">设备状态</div>
  98. <div class="di-r">正常</div>
  99. </div>
  100. <div class="detail-item">
  101. <div class="di-l">运行时长</div>
  102. <div class="di-r">56天18小时01分钟</div>
  103. </div>
  104. </div>
  105. </div>
  106. <div class="cancel">
  107. <span>设置为重点监控</span>
  108. </div>
  109. </section>
  110. <script src="js/jquery-3.2.1.min.js"></script>
  111. <script src="js/ezuikit.js"></script>
  112. <script src="js/page.js"></script>
  113. <script>
  114. let monitorData = [
  115. {
  116. },
  117. ]
  118. $(".tcdPageCode").createPage({
  119. pageCount: 20,
  120. current: 1,
  121. backFn: function(p) {
  122. }
  123. });
  124. var player = new EZUIPlayer("testPlayer");
  125. player.on("error", function() {
  126. console.log("error");
  127. });
  128. player.on("play", function() {
  129. console.log("play");
  130. });
  131. player.on("pause", function() {
  132. console.log("pause");
  133. });
  134. Array.from(document.querySelectorAll(".s1 .video-ctrl")).forEach(
  135. (dom, index) => {
  136. dom.addEventListener("click", e => {
  137. console.log("placeClickHandle", index);
  138. window.placeClickHandle && window.placeClickHandle(index);
  139. });
  140. }
  141. );
  142. getMonitorUrl()
  143. function getMonitorUrl() {
  144. $.ajax({
  145. url:"http://95787.com/api/getSessionID.php",
  146. type:"post",
  147. data:{
  148. key:'c1685ef2012c099ec3daa238907577ed'
  149. },
  150. success:function(data){
  151. }
  152. })
  153. }
  154. </script>
  155. </body>
  156. </html>