| | |
|---|
| | | .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; /* 添加相对定位 */ |
|---|
| | |
|---|
| | | 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> |
|---|
| | |
|---|
| | | <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> |
|---|
| | |
|---|
| | | 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) |
|---|
| | | } |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | 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/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/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) => ( |
|---|
| | |
|---|
| | | } |
|---|
| | | |
|---|
| | | let videoMap = new Map(); |
|---|
| | | $(document).on('click', 'video', function() { |
|---|
| | | $(document).on('click', 'video', function () { |
|---|
| | | let ID = this.id;//获取当前点击事件的元素 |
|---|
| | | console.log(ID); |
|---|
| | | console.log(videoMap); |
|---|
| | |
|---|
| | | 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> |
|---|
