perf: camera manage show video name on hover video component

@@ -185,7 +185,7 @@
                 :span="getColLayout"
               >
                 <div class="box-border w-full h-full p-3">
-                  <div class="bg-yellow-50 w-full h-full overflow-hidden relative">
+                  <div class="bg-yellow-50 w-full h-full overflow-hidden relative video-container">
                     <VideoPlay
                       @error="handleVideoError"
                       v-bind="options"
@@ -193,9 +193,10 @@
                       :title="item.name"
                     />
                     <div
-                      class="absolute hidden top-0 left-0 z-50 bg-gray-200 text-lg w-full h-full flex justify-center items-center"
+                      class="video-container-mask absolute top-0 left-0 z-50 text-lg w-full text-light-50 flex justify-center items-center"
+                      style="height: 100%; background-color: rgba(0, 0, 0, 0.5)"
                     >
-                      <span>视频名称</span>
+                      <span>{{ item.name }}</span>
                     </div>
                   </div>
                 </div>
@@ -235,4 +236,22 @@
     position: absolute;
     height: calc(100%) !important;
   }
+
+  .split-screen-mode:deep(.d-player-control) {
+    z-index: 99;
+  }
+
+  .video-container {
+    .video-container-mask {
+      opacity: 0;
+      transition: opacity 0.5;
+      pointer-events: none;
+    }
+
+    &:hover {
+      .video-container-mask {
+        opacity: 1;
+      }
+    }
+  }
 </style>