1

components/SimpleDanmakuPlayer.vue

@@ -1,179 +0,0 @@
-<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>