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