视频监控demo

src/views/video/index.vue

@@ -4,7 +4,7 @@
       <!-- 视频监控 -->
       <div class="page-wrapper">
         <div class="video-wrapper">
-          <div class="item" @click="openDialog">
+          <!-- <div class="item" @click="openDialog"> -->
             <!-- <video-player
                         ref="videoPlayer"
                         class="video-player"
@@ -22,6 +22,18 @@
                             <source src="https://gctxyc.liveplay.myqcloud.com/gc/zjjmht_1/index.m3u8" type="application/x-mpegURL">
                             Your browser does not support the video tag.
                         </video> -->
+            <!-- <video
+              id="videoPlayer"
+              class="video-js vjs-default-skin"
+              playsinline
+              autoplay="autoplay"
+              style="width: 100%; height: 100%;"
+            >
+              <source :src="attachmentLink" type="application/x-mpegURL" />
+              <source :src="require('@/assets/video/zimu.mp4')" type="video/mp4">
+            </video> -->
+          <!-- </div> -->
+          <div class="item" v-for="(index, item) in playerOptions.sources" @click="openDialog" :key="index">
             <video
               id="videoPlayer"
               class="video-js vjs-default-skin"
@@ -32,17 +44,13 @@
               <source :src="attachmentLink" type="application/x-mpegURL" />
               <source :src="require('@/assets/video/zimu.mp4')" type="video/mp4">
             </video>
-          </div>
-          <div class="item"></div>
-          <div class="item"></div>
-          <div class="item"></div>
-          <div class="item"></div>
-          <div class="item"></div>
+            </div>
         </div>
       </div>
     </div>
     <el-dialog :visible.sync="dialogVisible" title="监控视频" :fullscreen="true" class="videoShowModal">
-        <video
+        <!-- <div style="width: 100%; height: 100%; background-color: pink;"> -->
+            <video
               id="videoPlayer"
               class="video-js vjs-default-skin"
               playsinline
@@ -52,6 +60,17 @@
               <source :src="attachmentLink" type="application/x-mpegURL" />
               <source :src="require('@/assets/video/zimu.mp4')" type="video/mp4">
             </video>
+        <!-- </div> -->
+        <!-- <video
+              id="videoPlayer"
+              class="video-js vjs-default-skin"
+              playsinline
+              autoplay="autoplay"
+              style="width: 90%; height: 90%;"
+            >
+              <source :src="attachmentLink" type="application/x-mpegURL" />
+              <source :src="require('@/assets/video/zimu.mp4')" type="video/mp4">
+            </video> -->
     </el-dialog>
   </div>
 </template>
@@ -85,6 +104,30 @@ export default {
         controls: true, // 是否显示控制栏
         // poster: 'http://path/to/poster.jpg',//视频封面
         sources: [
+            {
+                type: "video/mp4",
+                src: require('@/assets/video/zimu.mp4'),
+            },
+            {
+                type: "video/mp4",
+                src: require('@/assets/video/zimu.mp4'),
+            },
+            {
+                type: "video/mp4",
+                src: require('@/assets/video/zimu.mp4'),
+            },
+            {
+                type: "video/mp4",
+                src: require('@/assets/video/zimu.mp4'),
+            },
+            {
+                type: "video/mp4",
+                src: require('@/assets/video/zimu.mp4'),
+            },
+            {
+                type: "video/mp4",
+                src: require('@/assets/video/zimu.mp4'),
+            },
           //     {
           //     type: "video/mp4",
           //     // src: "https://www.example.com/path/to/your/video.mp4"
@@ -95,13 +138,13 @@ export default {
           //     // src: "https://www.example.com/path/to/your/video.mp4"
           //     src: 'https://dh5.cntv.myalicdn.com/asp/h5e/hls/main/0303000a/3/default/de77ac92685211efbfb96c92bf2d4d36/main.m3u8?maxbr=2048&contentid=15120519184043',
           // }
-          {
-            // src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',//视频文件地址
-            // src: 'https://dh5.cntv.myalicdn.com/asp/h5e/hls/main/0303000a/3/default/de77ac92685211efbfb96c92bf2d4d36/main.m3u8?maxbr=2048&contentid=15120519184043',//视频文件地址
-            src: "https://gctxyc.liveplay.myqcloud.com/gc/zjjmht_1/index.m3u8",
-            type: "m3u8",
-            // type: 'application/x-mpegURL'//视频类型，这里可以不写，如果写一定要写对，否则会无法播放
-          },
+        //   {
+        //     // src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8',//视频文件地址
+        //     // src: 'https://dh5.cntv.myalicdn.com/asp/h5e/hls/main/0303000a/3/default/de77ac92685211efbfb96c92bf2d4d36/main.m3u8?maxbr=2048&contentid=15120519184043',//视频文件地址
+        //     src: "https://gctxyc.liveplay.myqcloud.com/gc/zjjmht_1/index.m3u8",
+        //     type: "m3u8",
+        //     // type: 'application/x-mpegURL'//视频类型，这里可以不写，如果写一定要写对，否则会无法播放
+        //   },
         ],
       },
     };