uniProject/components/SimpleDanmakuPlayer.vue

<template>
  <view class="player-container" :class="{ fullscreen: isFullscreen }">
    <!-- 视频 -->
    <video
      :src="videoSrc"
      controls
      :autoplay="false"
      style="width: 100%; height: 100%;"
    ></video>

    <!-- 普通全屏按钮（非全屏时显示，H5/App 都可用） -->
    <!-- 注意：这个按钮不能放在 cover-view 里，否则 App 上可能不响应 -->
    <!-- 所以我们只在非全屏、非 App/小程序时显示它 -->
    <!-- #ifndef APP-PLUS && !MP-WEIXIN -->
    <view v-if="!isFullscreen" class="btn" @click.stop="enterFullscreen">🔲</view>
    <!-- #endif -->

    <!-- 覆盖层：仅用于 App 和小程序 -->
    <!-- #ifdef APP-PLUS || MP-WEIXIN -->
    <cover-view class="cover-layer">
      <!-- 固定弹幕：不接收点击，透传事件 -->
      <cover-view class="fixed-danmaku">我爱弹幕111</cover-view>

      <!-- 全屏按钮（非全屏时显示） -->
      <cover-view
        v-if="!isFullscreen"
        class="control-btn"
        @click="enterFullscreen"
      >🔲</cover-view>

      <!-- 退出全屏按钮（全屏时显示） -->
      <cover-view
        v-if="isFullscreen"
        class="control-btn exit"
        @click="exitFullscreen"
      >◻️</cover-view>
    </cover-view>
    <!-- #endif -->

    <!-- H5 覆盖层（普通 view） -->
    <!-- #ifndef APP-PLUS && !MP-WEIXIN -->
    <view v-if="isFullscreen" class="h5-cover">
      <view class="fixed-danmaku">我爱弹幕111</view>
      <view class="control-btn exit" @click="exitFullscreen">◻️</view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script setup>
import { ref } from 'vue'

const videoSrc = 'http://www.w3school.com.cn/i/movie.mp4' // 替换为你的视频地址

const isFullscreen = ref(false)

const enterFullscreen = () => {
  isFullscreen.value = true
  // #ifdef APP-PLUS
  plus.navigator.setFullscreen(true)
  // #endif
}

const exitFullscreen = () => {
  isFullscreen.value = false
  // #ifdef APP-PLUS
  plus.navigator.setFullscreen(false)
  // #endif
}
</script>

<style scoped>
.player-container {
  position: relative;
  width: 100%;
  height: 240px;
  background: #000;
}

.player-container.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
}

/* ===== App & 小程序：cover-view 方案 ===== */
/* #ifdef APP-PLUS || MP-WEIXIN */
.cover-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 关键：默认不拦截事件 */
  pointer-events: none;
}

.fixed-danmaku {
  position: absolute;
  bottom: 100rpx;
  left: 50%;
  transform: translateX(-50%);
  padding: 10rpx 20rpx;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 28rpx;
  border-radius: 10rpx;
  white-space: nowrap;
  /* 不需要 pointer-events: auto，保持透传 */
}

/* 只有按钮需要接收点击 */
.control-btn {
  position: absolute;
  right: 16rpx;
  bottom: 16rpx;
  width: 64rpx;
  height: 64rpx;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 28rpx;
  /* 关键：只在这里开启事件 */
  pointer-events: auto;
}

.control-btn.exit {
  /* 退出按钮样式可复用 */
}
/* #endif */

/* ===== H5 方案 ===== */
/* #ifndef APP-PLUS && !MP-WEIXIN */
.h5-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.h5-cover .fixed-danmaku {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 16px;
  border-radius: 6px;
  white-space: nowrap;
}

.h5-cover .control-btn {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  pointer-events: auto;
  cursor: pointer;
}
/* #endif */
</style>