uni-app中video组件的弹幕层级太高导致按钮被遮挡无法点击

在uni-app中，video组件的弹幕（通常是使用自定义的弹幕系统实现）可能会因为其层级过高而遮挡住页面上的其他元素，如按钮。要解决这个问题，我们需要调整弹幕的层级，确保它不会覆盖到其他重要的交互元素。以下是一个基本的实现思路，结合代码示例，展示如何通过调整CSS样式来控制弹幕的层级。

解决思路

1. 使用自定义弹幕系统：首先，确保你使用的是自定义的弹幕组件，而不是依赖video组件自带的（因为video组件本身并不直接支持弹幕功能）。

2. 调整弹幕层级：通过CSS调整弹幕容器的z-index属性，确保它低于需要点击的按钮的层级。

代码示例

假设我们有一个简单的页面布局，包含一个video组件和一个自定义的弹幕系统，以及一个被遮挡的按钮。

1. 页面布局（index.vue）

<template>
  <view class="container">
    <video :src="videoSrc" class="video"></video>
    <view class="danmaku-container">
      <!-- 弹幕列表 -->
      <view v-for="(danmaku, index) in danmakus" :key="index" class="danmaku">{{ danmaku }}</view>
    </view>
    <button class="play-button">点击播放</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      videoSrc: 'path/to/your/video.mp4',
      danmakus: ['弹幕1', '弹幕2', '弹幕3']
    };
  }
};
</script>

<style>
.container {
  position: relative;
}
.video {
  width: 100%;
  height: auto;
}
.danmaku-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* 确保弹幕不拦截点击事件 */
  z-index: 1; /* 调整层级 */
}
.danmaku {
  position: absolute;
  white-space: nowrap;
}
.play-button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2; /* 确保按钮层级高于弹幕 */
}
</style>

说明

• danmaku-container的z-index设置为1，确保它低于按钮的层级（按钮的z-index为2）。
• 使用pointer-events: none;属性确保弹幕容器不会拦截任何点击事件，这样用户仍然可以点击到被弹幕“覆盖”的按钮。
• 通过调整z-index，你可以灵活地控制页面上各元素的堆叠顺序。

以上代码提供了一个基本的框架，你可以根据实际需求进一步调整和优化。