|  |  | 
 |  |  |         .video-container { | 
 |  |  |             display: inline-block; | 
 |  |  |             vertical-align: top; | 
 |  |  |             width: 25%; /* 六个视频平均分配一行的宽度 */ | 
 |  |  |             width: 33%; /* 3个视频平均分配一行的宽度 */ | 
 |  |  |             /*padding: 2px; !* 可以根据需要调整内边距 *!*/ | 
 |  |  |             box-sizing: border-box; | 
 |  |  |         } | 
 |  |  | 
 |  |  |     </div> | 
 |  |  | </div> | 
 |  |  | <script th:inline="javascript"> | 
 |  |  |     const restartPause = 2000; | 
 |  |  |     var chanMap = new Map(); | 
 |  |  |     window.onload = function () { | 
 |  |  |  | 
 |  |  |         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/"); | 
 |  |  |         console.log(chanMap); | 
 |  |  |     } | 
 |  |  |     const linkToIceServers = (links) => ( | 
 |  |  |         (links !== null) ? links.split(', ').map((link) => { | 
 |  |  |             const m = link.match(/^<(.+?)>; rel="ice-server"(; username="(.*?)"; credential="(.*?)"; credential-type="password")?/i); | 
 |  |  | 
 |  |  |             this.eTag = ''; | 
 |  |  |             this.queuedCandidates = []; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         stop() { | 
 |  |  |             if (this.pc) { | 
 |  |  |                 try { | 
 |  |  |                     this.pc.close(); | 
 |  |  |                 } catch (e) { | 
 |  |  |                     console.log("Failure close peer connection:" + e); | 
 |  |  |                 } | 
 |  |  |                 this.pc = null; | 
 |  |  |             } | 
 |  |  |         } | 
 |  |  |     } | 
 |  |  |  | 
 |  |  |     let videoMap = new Map(); | 
 |  |  |     $('video').click(function (e) { | 
 |  |  |         let ID = e.target.id;//获取当前点击事件的元素 | 
 |  |  |         console.log(ID); | 
 |  |  |         console.log(videoMap); | 
 |  |  |         if (videoMap.get(ID) != null) { | 
 |  |  |             closeVideo(ID, videoMap.get(ID)); | 
 |  |  |             closeVideo(ID); | 
 |  |  |         } else { | 
 |  |  |             let client = new WHEPClient("http://127.0.0.1:8889/165/", ID); | 
 |  |  |             let stream = chanMap.get(ID); | 
 |  |  |             let client = new WHEPClient(stream, ID); | 
 |  |  |             videoMap.set(ID, client); | 
 |  |  |         } | 
 |  |  |     }); | 
 |  |  |  | 
 |  |  |     function closeVideo(id) { | 
 |  |  |         let elementById = document.getElementById(id); | 
 |  |  |         elementById.pause(); | 
 |  |  |         console.log("关闭" + id) | 
 |  |  |         let client = videoMap.get(id); | 
 |  |  |         client.stop(id); | 
 |  |  |         videoMap.delete(id); | 
 |  |  |     } | 
 |  |  | </script> |