From bf61ff021860b7b9b91d71e5eb52f43f22f722ad Mon Sep 17 00:00:00 2001
From: haozq <1611483981@qq.com>
Date: Mon, 17 Jun 2024 19:46:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=BB=98=E8=AE=A4=E6=9D=A1?=
 =?UTF-8?q?=E6=95=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/pages/video/videoAjax.js | 14 ++++++++++++++
 pages/video/video.html      | 20 ++++++++++++++++++--
 2 files changed, 32 insertions(+), 2 deletions(-)

diff --git a/js/pages/video/videoAjax.js b/js/pages/video/videoAjax.js
index 28fc29b..0c2881a 100644
--- a/js/pages/video/videoAjax.js
+++ b/js/pages/video/videoAjax.js
@@ -58,4 +58,18 @@ function loadVideoTree() {
         $('.device-status').eq(1).html('在线（' + onlineNum + '）')
         $('.device-status').eq(2).html('离线（' + offLineNum + '）')
     }
+}
+
+function fourVideo(){
+    for (let i = 1; i < 5; i++) {
+        document.getElementById("windowbox" + i).style.cssText = "width: 48.5%;height: 48.8%;";
+        document.getElementById("videoPlayer"+i).style.cssText = "width: 100%;height: 100%;";
+        $('.video'+i+'-dimensions').css("width", "100%");
+        $('.video'+i+'-dimensions').css("height", "100%");
+        document.getElementById("windowbox" + i).style.display = "block";
+    }
+    for (var i = 5; i <= 9; i++) {
+        document.getElementById("windowbox" + i).style.display = "none";
+    }
+    console.log("1")
 }
\ No newline at end of file
diff --git a/pages/video/video.html b/pages/video/video.html
index 662f74b..5c4ecff 100644
--- a/pages/video/video.html
+++ b/pages/video/video.html
@@ -110,10 +110,26 @@
         <div id="center-box">
             <div id="video-box">
                 <div id="balla" class="split split-horizontal">
-                    <div id="windowbox" class="ballsplit " ondblclick="ballScreenBig('1')"
-                        style="width: 100%;height: 100%; position: relative;z-index: 9999999999;pointer-events:auto">
+					<div style="margin-left: 50%">
+						<button onclick="onVideo()">1</button>
+						<button onclick="fourVideo()" >4</button>
+					</div>
+                    <div id="windowbox1" class="ballsplit " ondblclick="ballScreenBig('1')"
+                        style="width: 100%;height: 100%; position: relative;z-index: 9999999999;pointer-events:auto;">
                         <video id="videoPlayer1" class="ball-content" autoplay="autoplay" loop="loop" muted controls="controls"></video>
                     </div>
+					<div id="windowbox2" class="ballsplit " ondblclick="ballScreenBig('1')"
+						 style="width: 100%;height: 100%; position: relative;z-index: 9999999999;pointer-events:auto;display: none;">
+						<video id="videoPlayer2" class="ball-content" autoplay="autoplay" loop="loop" muted controls="controls"></video>
+					</div>
+					<div id="windowbox3" class="ballsplit " ondblclick="ballScreenBig('1')"
+						 style="width: 100%;height: 100%; position: relative;z-index: 9999999999;pointer-events:auto;display: none;">
+						<video id="videoPlayer3" class="ball-content" autoplay="autoplay" loop="loop" muted controls="controls"></video>
+					</div>
+					<div id="windowbox4" class="ballsplit " ondblclick="ballScreenBig('1')"
+						 style="width: 100%;height: 100%; position: relative;z-index: 9999999999;pointer-events:auto;display: none;">
+						<video id="videoPlayer4" class="ball-content" autoplay="autoplay" loop="loop" muted controls="controls"></video>
+					</div>
                 </div>
             </div>
         </div>