zc

src/components/newSubVideoComponent.vue

@@ -5,7 +5,8 @@
       <div class="sub-video-big-box" v-for="(item,index) in dataList" :key="index">
         <div class="sub-video-box">
           <p class="sub-name-p">{{item.roomNum?item.subName+'('+item.roomNum+')':item.subName}}</p>
-          <H5PlayerVideo class="sub-video-box" :videoProps="item.videoData"></H5PlayerVideo>
+          <!--<H5PlayerVideo class="sub-video-box" :videoProps="item.videoData"></H5PlayerVideo>-->
+          <mpegts-video style="display: inline-block" :videoProps="item.videoData"  :key="index"></mpegts-video>
         </div>
         <div class="sensor-max-box">
           <div class="sensor-box" v-for="(minItem,minIndex) in item.sensorList" :key="minIndex">
@@ -21,12 +22,13 @@
         </div>
       </div>
     </div>
-    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
+    <!--<fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>-->
   </div>
 </template>
 <script>
   import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
   import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
+  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
   import {
     laboratorySubRelInfoSelectInfoAndSensor,
     iotCameraFindByCondition
@@ -36,7 +38,8 @@
     name: 'newSubVideoComponent',
     components: {
       H5PlayerVideo,
-      fullH5PlayerVideo
+      fullH5PlayerVideo,
+      mpegtsVideo
     },
     data() {
       return {

src/components/planAlarm/planAlarm.vue

@@ -18,8 +18,9 @@
                 <div v-if="!lookImgType" class="planAlarm-big-box">
                     <div class="planAlarm-left-box">
                         <div class="video-box video-box-scrollbar">
-                            <H5PlayerVideo style="margin:0 0 10px 0;"
-                                           v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
+                            <mpegts-video style="display: inline-block" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+                            <!--<H5PlayerVideo style="margin:0 0 10px 0;"-->
+                                           <!--v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>-->
                             <p class="null-video-p" v-if="!videoList[0]">实验室未配置摄像头</p>
                         </div>
                         <div class="bugle-box">
@@ -135,7 +136,7 @@
                 </div>
             </div>
         </div>
-      <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
+      <!--<fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>-->
     </div>
 </template>
 <script>
@@ -149,9 +150,9 @@
         laboratoryPlanCloseRiskPlan,
         iotCameraFindByCondition,
     } from "@/api/index";
-    import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
     import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
     import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
+    import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
 
     export default {
         name: 'planAlarm',

src/views/emergencyManagement/newPageComponent/newVideoComponent.vue

@@ -5,19 +5,21 @@
       <p class="left-button-p el-icon-arrow-left" v-if="dataList[2]" @click="leftButton()"></p>
     </div>
     <div class="video-max-big-box">
-      <H5PlayerVideo class="sub-video-box" :videoProps="item.videoData"
-       v-for="(item,index) in videoList" :key="index"></H5PlayerVideo>
+      <mpegts-video style="display: inline-block" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+      <!--<H5PlayerVideo class="sub-video-box" :videoProps="item"-->
+       <!--v-for="(item,index) in videoList" :key="index"></H5PlayerVideo>-->
       <p class="null-text-p">该实验室未配置监控设备</p>
     </div>
     <div class="button-box">
       <p class="right-button-p el-icon-arrow-right" v-if="dataList[2]" @click="rightButton()"></p>
     </div>
-    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
+    <!--<fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>-->
   </div>
 </template>
 <script>
   import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue'
   import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
+  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
   import {
     iotCameraFindByCondition
   } from '@/api/index'
@@ -25,7 +27,8 @@
     name: 'newVideoComponent',
     components: {
       H5PlayerVideo,
-      fullH5PlayerVideo
+      fullH5PlayerVideo,
+      mpegtsVideo
     },
     data () {
       return {

src/views/emergencyManagement/pageComponent/videoListComponent.vue

@@ -1,8 +1,9 @@
 <template>
   <div class="videoListComponent">
     <div class="max-big-for-box">
-      <H5PlayerVideo style="margin:10px 0 0;"
-                     v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
+      <mpegts-video style="display: inline-block" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+      <!--<H5PlayerVideo style="margin:10px 0 0;"-->
+                     <!--v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>-->
       <img v-if="!videoList[0]" class="null-img" src="@/assets/ZDimages/null-data-1.png">
     </div>
     <div class="pagination-max-box">
@@ -16,19 +17,21 @@
       />
       <p class="null-pagination-p"></p>
     </div>
-    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
+    <!--<fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>-->
   </div>
 </template>
 <script>
   import { iotCameraFindByCondition } from "@/api/index";
   import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
   import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
+  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
 
   export default {
     name: 'videoListComponent',
     components: {
       H5PlayerVideo,
-      fullH5PlayerVideo
+      fullH5PlayerVideo,
+      mpegtsVideo
     },
     data () {
       return {

src/views/videoSurveillance/pageComponent/videoComponent.vue

@@ -13,8 +13,9 @@
       <!--<p class="name-p" style="margin-left:10px;">人</p>-->
     </div>
     <div class="video-max-big-box">
-      <H5PlayerVideo style="margin:20px 28px 0 0 ;"
-                     v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
+      <mpegts-video style="display: inline-block" :videoProps="item" v-for="(item,index) in videoList" :key="index"></mpegts-video>
+      <!--<H5PlayerVideo style="margin:20px 28px 0 0 ;"-->
+                     <!--v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>-->
       <img v-if="!videoList[0]" class="null-img" src="@/assets/ZDimages/null-data-1.png">
     </div>
     <pagination v-show="videoTotal>0"
@@ -25,18 +26,20 @@
                 :limit.sync="videoQueryParams.pageSize"
                 @pagination="videoInitialize"
     />
-    <fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>
+    <!--<fullH5PlayerVideo v-if="fullVideoType" :fullVideoProps="fullVideoProps"></fullH5PlayerVideo>-->
   </div>
 </template>
 <script>
   import { iotCameraLargeFindByCondition } from "@/api/index";
   import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
   import fullH5PlayerVideo from '@/components/fullH5PlayerVideo/fullH5PlayerVideo.vue'
+  import mpegtsVideo from '@/components/mpegtsVideo/mpegtsVideo.vue'
   export default {
     name: 'videoComponent',
     components: {
       H5PlayerVideo,
-      fullH5PlayerVideo
+      fullH5PlayerVideo,
+      mpegtsVideo
     },
     data () {
       return {