From 87fa388d22e9dae8927c31f40ead4dba1c3d69fb Mon Sep 17 00:00:00 2001
From: ‘liusuyi’ <1951119284@qq.com>
Date: 星期五, 01 九月 2023 11:55:55 +0800
Subject: [PATCH] 实时报警聚合接口(all)增加报警类型

---
 ard-work/src/main/resources/templates/preview.html |   35 ++++++++++++++++++++++++++++++-----
 1 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/ard-work/src/main/resources/templates/preview.html b/ard-work/src/main/resources/templates/preview.html
index 9915e66..381edb7 100644
--- a/ard-work/src/main/resources/templates/preview.html
+++ b/ard-work/src/main/resources/templates/preview.html
@@ -68,6 +68,18 @@
             height: 100%;
             object-fit: fill;
         }
+        #loadingMessage {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 24px;
+            color: white;
+            background-color: rgba(0, 0, 0, 0.7);
+            padding: 10px 20px;
+            border-radius: 5px;
+            display: none;
+        }
     </style>
 </head>
 <body>
@@ -75,6 +87,7 @@
     <div class="container" id="gridContainer">
         <!-- 缃戞牸椤圭洰灏嗙敱 JavaScript 鍔ㄦ�佺敓鎴� -->
     </div>
+    <div id="loadingMessage">姝e湪鍙栨祦</div>
     <div class="container2">
         <div class="button-container">
             <button class="toggle-button" onclick="changeGrid(1, 1)">1x1</button>
@@ -106,16 +119,27 @@
             const videoContainer = document.createElement('div');
             videoContainer.className = 'video-container';
             const video = document.createElement('video');
-            video.id="video"+i;
+            video.id = "video" + i;
             video.controls = true;
             video.autoplay = true;
             video.muted = true;
+            video.loop= true;
+
             videoContainer.appendChild(video);
             gridItem.appendChild(videoContainer);
             gridContainer.appendChild(gridItem);
 
             video.addEventListener('loadedmetadata', function () {
                 adjustGridItemSize(gridItem, gridItem.videoWidth, gridItem.videoHeight);
+            });
+            video.addEventListener("click", function() {
+                loadingMessage.style.display = "block";
+                video.play().then(function() {
+                    loadingMessage.style.display = "none";
+                }).catch(function(error) {
+                    console.error("Error playing the video:", error);
+                    loadingMessage.style.display = "none";
+                });
             });
             console.log(video.id)
         }
@@ -365,7 +389,7 @@
     }
 
     let videoMap = new Map();
-    $(document).on('click', 'video', function() {
+    $(document).on('click', 'video', function () {
         let ID = this.id;//鑾峰彇褰撳墠鐐瑰嚮浜嬩欢鐨勫厓绱�
         console.log(ID);
         console.log(videoMap);
@@ -384,9 +408,10 @@
         client.stop(id);
         videoMap.delete(id);
     }
-    function closeAllVideo(){
-        videoMap.forEach((val,key) => {
-            console.log(val,key);
+
+    function closeAllVideo() {
+        videoMap.forEach((val, key) => {
+            console.log(val, key);
             val.stop(key);
             videoMap.delete(key);
         })

--
Gitblit v1.9.3