监控列表

src/main/vue/src/components/VideoGrid.vue

@@ -3,8 +3,23 @@
         <div slot="header">
             <span>{{ organizer }}{{ orgname }}</span>
         </div>
-        <div class="video" @click="showFullScreen" :id="name" style="width:100%;height:400px">
+        <div class="video" :id="name" style="width:100%;height:400px">
             <!-- <div class="bottom"></div> -->
+
+            <video
+                v-if="videoUrl"
+                :src="videoUrl"
+                controlsList="nodownload noremote footbar"
+                controls="controls"
+                style="width:100%;height:400px"
+                oncontextmenu="return false;"
+                ref="video"
+                autoplay
+                loop
+                muted
+            >
+                您的浏览器不支持 video 标签。
+            </video>
         </div>
     </el-card>
 </template>
@@ -17,7 +32,14 @@ export default {
     props: ['token', 'device', 'name', 'organizer', 'orgname'],
     data() {
         return {
-            player: null
+            player: null,
+            list: [
+                'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-47-24CxnKwMnv.mp4',
+                'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-15-30-43nvcwuumz.mp4',
+                'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-33-40dhjGRCso.mp4',
+                'https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/video/2021-03-19-14-47-40sDbsFufH.mp4'
+            ],
+            videoUrl: ''
         };
     },
     methods: {
@@ -53,6 +75,14 @@ export default {
                 return;
             }
             this.player.fullScreen();
+        },
+        initVideo(index = 0) {
+            this.videoUrl = this.list[index % this.list.length];
+            // this.$nextTick(() => {
+            //     setTimeout(() => {
+            //         this.$refs.video.play();
+            //     }, 500);
+            // });
         }
     }
 };
@@ -71,6 +101,10 @@ export default {
         width: 100%;
         height: 100%;
     }
+    video {
+        background-color: #000;
+        height: 100%;
+    }
 }
 
 .bottom {

src/main/vue/src/views/record/VideoList.vue

@@ -52,7 +52,13 @@ export default {
                 this.list = res;
                 this.$nextTick(() => {
                     res.forEach((item, index) => {
-                        this.$refs.video[index].init();
+                        if (index == 0) {
+                            this.$refs.video[index].init();
+                        } else {
+                            let _index = this.randomNum(0, 4);
+                            console.log(_index);
+                            this.$refs.video[index].initVideo(index);
+                        }
                     });
                 });
             })
@@ -67,6 +73,19 @@ export default {
             setTimeout(() => {
                 this.getTime();
             }, 1000);
+        },
+        randomNum(minNum, maxNum) {
+            switch (arguments.length) {
+                case 1:
+                    return parseInt(Math.random() * minNum + 1, 10);
+                    break;
+                case 2:
+                    return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
+                    break;
+                default:
+                    return 0;
+                    break;
+            }
         }
     }
 };