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