From ba32ee60111a6aea0fa6827b4e8eb36270106ad7 Mon Sep 17 00:00:00 2001
From: jiangrui <403209447@qq.com>
Date: Mon, 20 Jan 2025 10:34:04 +0800
Subject: [PATCH] 2025120

---
 detail.html | 55 ++++++++++++++++++++++++++++++++++++-----------------
 index.html  |  2 +-
 js/api.js   | 38 ++++++++++++++++++++++++++----------
 3 files changed, 67 insertions(+), 28 deletions(-)
diff --git a/detail.html b/detail.html
index f2b4c86..228e849 100644
--- a/detail.html
+++ b/detail.html
@@ -4,10 +4,16 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>达州易涝点查询</title>
     <link rel="stylesheet" href="./css/video-js.min.css" />
     <!-- <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> -->
     <!-- <script src="./js/hls.js@latest.js"></script> -->
+    <link
+      href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.min.css"
+      rel="stylesheet"
+    />
+    <!--播放器脚本文件-->
+    <script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.v5.1.0.min.js"></script>
 
     <script src="./js/msg.js"></script>
     <style>
@@ -26,7 +32,7 @@
       }
       .content {
         /* padding: 20px 40px; */
-        padding: 20px;
+        padding: 10px;
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -62,7 +68,7 @@
         justify-content: space-between;
         box-sizing: border-box;
         align-items: center;
-        padding: 20px;
+        padding: 15px;
         width: 100%;
         /* height: 130px; */
         /* background: url("./img/layer.png") no-repeat; */
@@ -185,7 +191,7 @@
       .roll {
         display: flex;
         width: 100%;
-        padding: 0 15px;
+        padding: 5px 15px;
         box-sizing: border-box;
       }
       .rollItem {
@@ -251,12 +257,15 @@
         left: 0;
       }
       .refresh {
-        font-size: 12px;
+        font-size: 16px;
+        border-radius: 6px;
+        border: 0;
+        width: 66px;
       }
       .err {
         color: #e21e1e;
       }
-      /*  */
+      /*  
       .vjs-error .vjs-error-display {
         width: 100%;
         height: 100%;
@@ -286,25 +295,24 @@
       .vjs-modal-dialog-content {
         display: none;
       }
-      /* 自定义加载条的背景色和宽度 */
       .video-js .vjs-loading-bar {
-        background: #f00; /* 红色加载条 */
-        height: 10px; /* 加载条高度 */
+        background: #f00; 
+        height: 10px; 
       }
 
-      /* 自定义加载条的动画时长 */
+      
       .video-js .vjs-loading-bar .vjs-progress-control {
-        animation-duration: 5s; /* 动画时间 */
+        animation-duration: 5s; 
       }
 
-      /* 如果需要隐藏加载中的图标或文字 */
+      
       .video-js .vjs-loading-bar .vjs-loading-bar {
-        position: relative; /* 如果需要覆盖定位 */
+        position: relative; 
       }
 
       .video-js .vjs-loading-bar .vjs-loading-bar::after {
-        content: none; /* 隐藏加载文字 */
-      }
+        content: none; 
+      }*/
     </style>
     <script src="./js/jquery.min.js"></script>
     <script src="./js/api.js"></script>
@@ -330,7 +338,20 @@
   </head>
   <body>
     <!-- <div class="status"></div> -->
-    <div class="videoBox">
+    <!-- <div class="videoBox"> -->
+    <video
+      id="player-container-id"
+      style="width: 100%"
+      height="210"
+      muted
+      autoplay
+      preload="auto"
+      playsinline
+      webkit-playsinline
+    ></video>
+    <!-- </div> -->
+
+    <!-- <div class="videoBox">
       <video
         webkit-playsinline="true"
         playsinline="true"
@@ -345,7 +366,7 @@
       <script>
         var player = videojs("myVideo");
       </script>
-    </div>
+    </div> -->
     <div class="content">
       <!-- <div class="text_dwxx"></div>
       <div class="layer">
diff --git a/index.html b/index.html
index 63c7e31..ab2c215 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>达州雨季易涝点监控</title>
     <script src="./js/jquery.min.js"></script>
     <script src="./js/api.js"></script>
     <script
diff --git a/js/api.js b/js/api.js
index 569023d..61adeec 100644
--- a/js/api.js
+++ b/js/api.js
@@ -71,10 +71,13 @@ function appendListDom(data) {
   $(`.videoList${type}`).prepend(title);
   console.log(1);
   data.map((item) => {
-    let local =
-      (localStorage.getItem("local") &&
-        localStorage.getItem("local").split(",")) ||
-      "0,0";
+    // let local =
+    //   (localStorage.getItem("local") &&
+    //     localStorage.getItem("local").split(",")) ||
+    //     "107.487141,31.219671";
+    let local = localStorage.getItem("local")
+      ? localStorage.getItem("local").split(",")
+      : "107.487141,31.219671";
 
     let dis = AMap.GeometryUtil.distance(local, [
       item.longitude,
@@ -162,7 +165,9 @@ function getInfo(id) {
           <i class="icon_position1"></i> <span>${data.d.name}</span>
         </div>
         <span class="btn_status ${statusClass}">${status}</span>
-        <div class="tip abs">如果监控长时间未成功播放，请刷新重试。<button onclick="refresh()" class="refresh">点击刷新</button></div>
+        
+        
+        <div class="tip abs">如果监控播放失败，请刷新重试。<button onclick="refresh()" class="refresh">点击刷新</button><button onclick="window.history.back();" class="refresh" style="margin-left:10px"> 返回</button></div>
       </div>
 
       <div class="text_yldgc"></div>
@@ -183,13 +188,26 @@ function getInfo(id) {
       </div>`;
       $(".content").append(str);
       if (data.c === 200) {
-        console.log(data);
-        player.src({
-          src: data.d.playUrl,
-          type: "application/x-mpegURL",
+        // console.log(data);
+        // player.src({
+        //   src: data.d.playUrl,
+        //   type: "application/x-mpegURL",
+        // });
+
+        // player.play();
+
+        player = TCPlayer("player-container-id", {
+          sources: [
+            {
+              src: data.d.playUrl,
+            },
+          ],
+          licenseUrl:
+            "https://license.vod2.myqcloud.com/license/v2/1300450518_1/v_cube.license",
+          licenseKey: "9d62a2d4d9526c91d966b1376ca0bde4",
         });
 
-        player.play();
+        // player.src(url); // url 播放地址
 
         // var hls;
         // var video = document.getElementById("myVideo");
