12

public/index.html

@@ -6,11 +6,6 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <!-- 引入 Vue CDN -->
-  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
-  <!-- 引入 jQuery CDN -->
-  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
-  <script src="../src/assets/module/PlayerControl.js"></script>
   <title>
     <%= htmlWebpackPlugin.options.title %>
   </title>

public/module/webs/index.html

@@ -19,10 +19,3 @@
 </body>
 
 </html>
-
-<style>
-	.h5-play-wrap {
-		height: 100%;
-		width: 100%;
-	}
-</style>

public/module/webs/index.js

@@ -139,6 +139,7 @@ const setVideoDom = () => {
   $canvas_ivs = $("#h5_ivs_" + WndIndex);
   $videoLoading = $("#h5_loading_" + WndIndex);
 };
+
 /**
 /**
  * @description 预览
@@ -148,6 +149,7 @@ const setVideoDom = () => {
  * @param {boolean} isChangeStream 是否是切换码流导致的重新拉流
  */
 const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
+  let channel = window.location.href.split("?")[1];
   if (
     playerInstance[WndIndex] &&
     onlineChannel.indexOf(channel) > -1 &&
@@ -157,7 +159,7 @@ const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
     return;
   }
   onStopPreview();
-  var player = null
+  var player = null;
   let options = {
     wsURL: "ws://" + "221.214.127.18" + ":" + "8200" + "/rtspoverwebsocket",
     rtspURL:
@@ -165,7 +167,7 @@ const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
       "221.214.127.18" +
       ":" +
       "8200" +
-      "/cam/realmonitor?channel=1" +
+      `/cam/realmonitor?channel=${channel}` +
       "&subtype=0" +
       "&proto=Private3",
     username: "admin",
@@ -187,9 +189,6 @@ const onPreview = (isPlayback, url, playbackIndex, isChangeStream) => {
     if (!player.isPlayback) {
       onlineChannel.push(channel);
       updateChannelList();
-      // if(curWndType !== 1) {
-      //     clickNextWnd();
-      // }
     }
   });
 

src/views/Zhou/ZNYWJK.vue

@@ -16,17 +16,14 @@
         </div>
         <div id="dqsxtxx">
           <div class="headers">
-            <!-- <video :src="videoSource" autoplay muted class="videos"></video> -->
             <iframe
-              src="module/webs/index.html"
+              :src="'module/webs/index.html?1'"
               frameborder="0"
               width="100%"
               height="100%"
+              ref="videos"
             ></iframe
             >;
-            <!-- 
-            <div class="videos"></div>
-            <div class="videos1"></div> -->
             <p class="h_footer">
               <span class="time">{{ dates }}</span>
               <img
@@ -62,7 +59,12 @@
         <div id="spjk">
           <div class="spjk_one" v-for="(item, index) in sxtlist" :key="index">
             <div class="jiankong">
-              <video :src="item.src" autoplay muted></video>
+              <iframe
+                :src="'module/webs/index.html?' + item.channel"
+                frameborder="0"
+                width="100%"
+                height="100%"
+              ></iframe>
             </div>
             <div class="spjk_title">{{ item.name }}</div>
           </div>
@@ -386,36 +388,40 @@ export default {
       ],
       sxtlist: [
         {
-          src: require("../../assets/videos/G.E.M.邓紫棋 - 不想回家.mp4"),
+          channel: "D19",
-          name: "SP锅炉",
+          name: "3号煤磨在线监测",
         },
         {
-          src: require("../../assets/videos/G.E.M.邓紫棋 - 句号.mp4"),
+          channel: "D14",
-          name: "回转窑",
+          name: "水泥散12#发货口",
         },
         {
-          src: require("../../assets/videos/G.E.M.邓紫棋 - GLORIA.mp4"),
+          channel: "69",
-          name: "西侧垃圾发电",
+          name: "1#回转窑",
         },
         {
-          src: require("../../assets/videos/林俊杰 - 愿与愁.mp4"),
+          channel: "70",
-          name: "北侧垃圾发电",
+          name: "辊压机",
         },
         {
-          src: require("../../assets/videos/G.E.M.邓紫棋 - 不想回家.mp4"),
+          channel: "71",
-          name: "SP锅炉",
+          name: "2#窑",
         },
         {
-          src: require("../../assets/videos/G.E.M.邓紫棋 - 句号.mp4"),
+          channel: "33",
-          name: "回转窑",
+          name: "矿区全貌",
         },
         {
-          src: require("../../assets/videos/G.E.M.邓紫棋 - GLORIA.mp4"),
+          channel: "40",
-          name: "西侧垃圾发电",
+          name: "3#煤磨",
         },
         {
-          src: require("../../assets/videos/林俊杰 - 愿与愁.mp4"),
+          channel: "63",
-          name: "北侧垃圾发电",
+          name: "垃圾处理北门外",
+        },
+        {
+          channel: "71",
+          name: "2#窑",
         },
       ],
       dates: new Date(),
@@ -471,15 +477,16 @@ export default {
       this.dates = formattedTime;
     }, 100);
     var options = {
-      wsURL:"ws://221.214.127.18:8200/rtspoverwebsocket",
+      wsURL: "ws://221.214.127.18:8200/rtspoverwebsocket",
-      rtspURL:"rtsp://admin:pyss2017@192.168.1.212:8200/cam/realmonitor?channel=D1&subtype=0",
+      rtspURL:
-      username:"admin",
+        "rtsp://admin:pyss2017@192.168.1.212:8200/cam/realmonitor?channel=D1&subtype=0",
-      password:"pyss2017"
+      username: "admin",
+      password: "pyss2017",
     };
     var videoplayerObj = document.getElementById("testVideo");
     var canvasplayerObj = document.getElementById("testCanvas");
     var player = new PlayerControl(options);
-    player.init(canvasplayerObj,videoplayerObj);
+    player.init(canvasplayerObj, videoplayerObj);
   },
 };
 </script>
@@ -716,8 +723,7 @@ export default {
         justify-content: space-around;
         flex-wrap: wrap;
         align-items: center;
-        align-content: space-around;
+        overflow-y: auto;
-        overflow-y: scroll;
         // 滚动条整体 整体如果不设置，只设置滑块和轨道是没有效果的
         ::-webkit-scrollbar {
           width: 5px;