相机预览-增加视频加载loading效果

src/components/LiveVideo/LiveVideo.vue

@@ -1,7 +1,11 @@
 <template>
-  <video id="video" autoplay muted loop class="video-js video-content">
-    <source :src="props.url" />
-  </video>
+  <div class="video-content-wrapper">
+    <div class="videoLoading" v-loading="true" element-loading-text="视频加载中..."></div>
+
+    <video v-loading="true" id="video" autoplay muted loop class="video-js video-content">
+      <source :src="props.url" />
+    </video>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -76,6 +80,19 @@
   .video-content {
     width: 100%;
     height: 100%;
+    position: relative;
+    z-index: 10;
     background-color: transparent !important;
   }
+
+  .video-content-wrapper {
+    height: 100%;
+    position: relative;
+  }
+  .videoLoading {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+  }
 </style>

src/views/cameras/preview/components/CameraLiveVideo/CameraLiveVideo.vue

@@ -16,7 +16,7 @@
 
 <style>
   .noPushStreamIpTip {
-    font-size: 40px;
+    font-size: 20px;
     margin-top: 300px;
     text-align: center;
   }