|
|
@@ -1,21 +1,14 @@
|
|
|
<template>
|
|
|
<view class="kecheng-study-page">
|
|
|
-
|
|
|
+ <zmm-watermark :watermark="watermark"></zmm-watermark>
|
|
|
<customNavbarVue title="课程" :show-back-btn="true" @back="goUpPage"></customNavbarVue>
|
|
|
<!-- 播放器 -->
|
|
|
<!-- <videoPlayVue v-if="showVideo" ref="videoRef" class="phone-video-box" @play-end="onPlayEnd" @play-play="onPlay"
|
|
|
@play-pause="onPause" @play-timeupdate="onTimeupdate"></videoPlayVue> -->
|
|
|
- <view class="video-wrapper">
|
|
|
- <video v-if="showVideo" :src="videoUrl" :poster="videoPoster" controls class="phone-video-box"
|
|
|
- @play="onVideoPlay" @pause="onVideoPause" @ended="onVideoEnd" @error="onVideoError" id="myVideo"
|
|
|
- object-fit="contain" custom-cache @fullscreenchange="onVideoFullscreenChange"></video>
|
|
|
- <view v-else class="phone-video-box master-image" :style="{ backgroundImage: 'url(' + imgsArr.videoBj + ')' }">
|
|
|
- <!-- <view class="video-player-icon" @click="handlePlayFirst"></view> -->
|
|
|
- </view>
|
|
|
- <zmm-watermark :watermark="watermark" class="watermark-component" ></zmm-watermark>
|
|
|
- <view class="static-watermark">保密内容 · 请勿外传</view>
|
|
|
- <!-- 视频背景图 -->
|
|
|
-
|
|
|
+ <video v-if="showVideo" :src="videoUrl" :poster="videoPoster" controls class="phone-video-box"
|
|
|
+ @play="onVideoPlay" @pause="onVideoPause" @ended="onVideoEnd" @error="onVideoError" id="myVideo"></video>
|
|
|
+ <view v-else class="phone-video-box master-image" :style="{ backgroundImage: 'url(' + imgsArr.videoBj + ')' }">
|
|
|
+ <!-- <view class="video-player-icon" @click="handlePlayFirst"></view> -->
|
|
|
</view>
|
|
|
<!-- 播放引导 -->
|
|
|
<view class="yindao-shadow-image" v-if="!shaDowImgFlag"
|
|
|
@@ -120,25 +113,6 @@
|
|
|
this.init();
|
|
|
},
|
|
|
methods: {
|
|
|
- onVideoFullscreenChange(e) {
|
|
|
- console.log('全屏状态变化:', e.detail.fullScreen);
|
|
|
- // 改用uniapp专属选择器，获取视频容器（避免document兼容问题）
|
|
|
- const query = uni.createSelectorQuery().in(this);
|
|
|
- query.select('.video-wrapper')
|
|
|
- .fields({ node: true, dataset: true })
|
|
|
- .exec((res) => {
|
|
|
- if (res[0] && res[0].node) {
|
|
|
- const videoWrapper = res[0].node;
|
|
|
- if (e.detail.fullScreen) {
|
|
|
- // 全屏：添加wx-video-fullscreen类（匹配样式）
|
|
|
- videoWrapper.classList.add('wx-video-fullscreen');
|
|
|
- } else {
|
|
|
- // 退出全屏：移除类，恢复默认样式
|
|
|
- videoWrapper.classList.remove('wx-video-fullscreen');
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
// 播放视频
|
|
|
playVideo() {
|
|
|
if (this.videoUrl) {
|
|
|
@@ -398,66 +372,6 @@
|
|
|
</script>
|
|
|
|
|
|
|
|
|
-<style lang="scss" scoped>
|
|
|
-.video-wrapper {
|
|
|
- position: relative;
|
|
|
- width: 100%;
|
|
|
- height: 400rpx;
|
|
|
- background-color: #000;
|
|
|
- overflow: hidden; /* 防止水印溢出 */
|
|
|
-
|
|
|
- .phone-video-box {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- z-index: 1; /* 明确视频层级，低于水印 */
|
|
|
- }
|
|
|
-
|
|
|
- // 1. 确保水印组件样式完全生效（铺满、置顶、不遮挡操作）
|
|
|
- .watermark-component {
|
|
|
- position: absolute !important; /* 强制绝对定位，避免组件自身样式覆盖 */
|
|
|
- top: 0 !important;
|
|
|
- left: 0 !important;
|
|
|
- width: 100% !important;
|
|
|
- height: 100% !important;
|
|
|
- z-index: 999 !important; /* 高于视频z-index:1 */
|
|
|
- pointer-events: none !important;
|
|
|
- background: transparent !important; /* 避免组件背景遮挡视频 */
|
|
|
- }
|
|
|
-
|
|
|
- // 2. 优化静态水印：提高对比度，确保可见
|
|
|
- .static-watermark {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%) rotate(-30deg);
|
|
|
- font-size: 32rpx;
|
|
|
- color: rgba(255, 255, 255, 0.3) !important; /* 提高不透明度，增强可见性 */
|
|
|
- font-weight: bold;
|
|
|
- white-space: nowrap;
|
|
|
- pointer-events: none;
|
|
|
- z-index: 999 !important;
|
|
|
- transition: all 0.3s ease;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-// 全屏样式优化：确保水印铺满屏幕
|
|
|
-.video-wrapper.wx-video-fullscreen {
|
|
|
- position: fixed !important;
|
|
|
- top: 0 !important;
|
|
|
- left: 0 !important;
|
|
|
- width: 100vw !important;
|
|
|
- height: 100vh !important;
|
|
|
- z-index: 9999 !important;
|
|
|
- background-color: #000 !important;
|
|
|
-
|
|
|
- .static-watermark {
|
|
|
- font-size: 80rpx !important;
|
|
|
- color: rgba(255, 255, 255, 0.4) !important; /* 全屏时进一步提高可见性 */
|
|
|
- }
|
|
|
-
|
|
|
- .watermark-component {
|
|
|
- width: 100vw !important;
|
|
|
- height: 100vh !important;
|
|
|
- }
|
|
|
-}
|
|
|
+<style lang="scss">
|
|
|
+
|
|
|
</style>
|
wangguoyu