目的：解决标题出现的问题

1、解释原因

HTML 的 <video> 元素默认是：

• 可交互的（因为有 controls、右键菜单等），

• 它的点击事件不会冒泡到父级，

• 也就是说，点击到视频画面上，事件被 <video> 拦截了，不会传递到外层 div。

2、解决方法

        在 video 的上面加一层透明的层，点击这个透明的层即可。

<div
  v-for="(item, index) in videoIdList[tunnelIndex].slice(0, 5)"
  class="video-list"
  :class="{ on: showVideoIndex === index }"
  :key="item?.id || item?.cameraId || index"
>
  <div class="img" @click="changeVideo(index)" style="position: relative;">
    <VideoWrtcPause
      :key="item?.cameraId || index"
      :cameraId="item"
      :ref="(el) => (videoRefs[index] = el)"
    />
    <!-- ✅ 透明遮罩层 -->
    <div
      class="video-mask"
      @click.stop="changeVideo(index)"
    ></div>
  </div>
</div>
<style>

.video-list .img {
  position: relative;
  display: inline-block;
}
.video-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background: transparent; /* 完全透明 */
  z-index: 10; /* 保证在 video 之上 */
}
</style>