|  |  |  | 
|---|
|  |  |  | .container { | 
|---|
|  |  |  | background-color: #151414; /* 将网格项目的颜色设置为红色背景 */ | 
|---|
|  |  |  | flex: 9; | 
|---|
|  |  |  | border: 1px solid #ccc; | 
|---|
|  |  |  | border: 10px solid; | 
|---|
|  |  |  | box-sizing: border-box; | 
|---|
|  |  |  | display: grid; | 
|---|
|  |  |  | grid-template-columns: repeat(2, 1fr); /* 默认 2x2 网格 */ | 
|---|
|  |  |  | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | border: 1px solid #ccc; | 
|---|
|  |  |  | border: 2px solid #384551; | 
|---|
|  |  |  | box-sizing: border-box; | 
|---|
|  |  |  | padding: 10px; /* 内边距为 10px */ | 
|---|
|  |  |  | position: relative; /* 添加相对定位 */ | 
|---|
|  |  |  | 
|---|
|  |  |  | video.addEventListener('loadedmetadata', function () { | 
|---|
|  |  |  | adjustGridItemSize(gridItem, gridItem.videoWidth, gridItem.videoHeight); | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | video.addEventListener("click", function() { | 
|---|
|  |  |  | video.addEventListener("click", function () { | 
|---|
|  |  |  | loadingMessage.style.display = "block"; | 
|---|
|  |  |  | video.play().then(function() { | 
|---|
|  |  |  | video.play().then(function () { | 
|---|
|  |  |  | loadingMessage.style.display = "none"; | 
|---|
|  |  |  | }).catch(function(error) { | 
|---|
|  |  |  | }).catch(function (error) { | 
|---|
|  |  |  | console.error("Error playing the video:", error); | 
|---|
|  |  |  | loadingMessage.style.display = "none"; | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | let mediamtxHost = "192.168.1.227" | 
|---|
|  |  |  | var chanMap = new Map(); | 
|---|
|  |  |  | window.onload = function () { | 
|---|
|  |  |  | changeGrid(2, 2); | 
|---|
|  |  |  | chanMap.set("video1", "http://127.0.0.1:8889/164/"); | 
|---|
|  |  |  | chanMap.set("video2", "http://127.0.0.1:8889/165/"); | 
|---|
|  |  |  | chanMap.set("video3", "http://127.0.0.1:8889/245/"); | 
|---|
|  |  |  | chanMap.set("video4", "http://127.0.0.1:8889/164/"); | 
|---|
|  |  |  | chanMap.set("video5", "http://127.0.0.1:8889/165/"); | 
|---|
|  |  |  | chanMap.set("video6", "http://127.0.0.1:8889/245/"); | 
|---|
|  |  |  | chanMap.set("video7", "http://127.0.0.1:8889/164/"); | 
|---|
|  |  |  | chanMap.set("video8", "http://127.0.0.1:8889/165/"); | 
|---|
|  |  |  | chanMap.set("video9", "http://127.0.0.1:8889/245/"); | 
|---|
|  |  |  | chanMap.set("video1", "http://" + mediamtxHost + ":8889/164/"); | 
|---|
|  |  |  | chanMap.set("video2", "http://" + mediamtxHost + ":8889/164/"); | 
|---|
|  |  |  | chanMap.set("video3", "http://" + mediamtxHost + ":8889/164/"); | 
|---|
|  |  |  | chanMap.set("video4", "http://" + mediamtxHost + ":8889/164/"); | 
|---|
|  |  |  | chanMap.set("video5", "http://" + mediamtxHost + ":8889/164/"); | 
|---|
|  |  |  | chanMap.set("video6", "http://" + mediamtxHost + ":8889/164/"); | 
|---|
|  |  |  | chanMap.set("video7", "http://" + mediamtxHost + ":8889/164/"); | 
|---|
|  |  |  | chanMap.set("video8", "http://" + mediamtxHost + ":8889/164/"); | 
|---|
|  |  |  | chanMap.set("video9", "http://" + mediamtxHost + ":8889/164/"); | 
|---|
|  |  |  | chanMap.set("video10", "http://" + mediamtxHost + ":8889/164/"); | 
|---|
|  |  |  | chanMap.set("video11", "http://" + mediamtxHost + ":8889/164/"); | 
|---|
|  |  |  | chanMap.set("video12", "http://" + mediamtxHost + ":8889/164/"); | 
|---|
|  |  |  | chanMap.set("video13", "http://" + mediamtxHost + ":8889/164/"); | 
|---|
|  |  |  | chanMap.set("video14", "http://" + mediamtxHost + ":8889/164/"); | 
|---|
|  |  |  | chanMap.set("video15", "http://" + mediamtxHost + ":8889/164/"); | 
|---|
|  |  |  | chanMap.set("video16", "http://" + mediamtxHost + ":8889/164/"); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | console.log(chanMap); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | const linkToIceServers = (links) => ( | 
|---|
|  |  |  | 
|---|
|  |  |  | }) | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  | </body> | 
|---|
|  |  |  | </html> | 
|---|