From cfa36565f54f4274e415af9899db2aedadbd7b76 Mon Sep 17 00:00:00 2001
From: aijinhui <aijinhui>
Date: 星期三, 06 九月 2023 16:10:43 +0800
Subject: [PATCH] 设备健康详情
---
ard-work/src/main/resources/templates/preview.html | 51 +++++++++++++++++++++++++++++++++++++++++----------
1 files changed, 41 insertions(+), 10 deletions(-)
diff --git a/ard-work/src/main/resources/templates/preview.html b/ard-work/src/main/resources/templates/preview.html
index 9915e66..1a57d63 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">姝ｅ湪鍙栨祦</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)
}
@@ -124,14 +148,19 @@
}
+ let mediamtxHost = "192.168.1.12"
var chanMap = new Map();
window.onload = function () {
changeGrid(2, 2);
- chanMap.set("video1", "http://127.0.0.1:8889/245/");
- chanMap.set("video2", "http://127.0.0.1:8889/164/");
- chanMap.set("video3", "http://127.0.0.1:8889/164/");
- chanMap.set("video4", "http://127.0.0.1:8889/165/");
- chanMap.set("video5", "http://127.0.0.1:8889/165/");
+ chanMap.set("video1", "http://" + mediamtxHost + ":8889/164/");
+ chanMap.set("video2", "http://" + mediamtxHost + ":8889/165/");
+ chanMap.set("video3", "http://" + mediamtxHost + ":8889/245/");
+ chanMap.set("video4", "http://" + mediamtxHost + ":8889/164/");
+ chanMap.set("video5", "http://" + mediamtxHost + ":8889/165/");
+ chanMap.set("video6", "http://" + mediamtxHost + ":8889/245/");
+ chanMap.set("video7", "http://" + mediamtxHost + ":8889/164/");
+ chanMap.set("video8", "http://" + mediamtxHost + ":8889/165/");
+ chanMap.set("video9", "http://" + mediamtxHost + ":8889/245/");
console.log(chanMap);
}
const linkToIceServers = (links) => (
@@ -365,7 +394,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,14 +413,16 @@
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);
})
}
+
</script>
</body>
</html>
--
Gitblit v1.9.3