This commit is contained in:
BAKEYi
parent
e94a376395
commit
8d885c3ec5
|
|
@ -1,822 +1,88 @@
|
||||||
<template>
|
<template>
|
||||||
<view style="z-index: 100;">
|
<view class="video-page">
|
||||||
<!-- 视频滑动主容器 -->
|
<!-- 原生视频组件：全端兼容 -->
|
||||||
<view class="view-box" :style="viewTopLength">
|
<video id="fullVideo" class="video-box" :src="videoUrl" controls show-fullscreen-btn enable-progress-gesture
|
||||||
<!-- 复用的5个视频容器 - 核心复用节点，不可删减 -->
|
:autoplay="false" :loop="false" :muted="false" @play="onPlay" @pause="onPause"
|
||||||
<view class="video-box" :style="itemViewTopLength0">
|
@fullscreenchange="handleFullScreenChange" @ended="onVideoEnd"></video>
|
||||||
<video :src="videoInfo_0.src" :style="fillScreen" :autoplay="videoInfo_0.autoplay"
|
|
||||||
:loop="videoInfo_0.loop" :controls="videoInfo_0.controls"
|
|
||||||
:enable-play-gesture="videoInfo_0.enablePlayGesture" :objectFit="videoInfo_0.objectFit || objectFit"
|
|
||||||
:show-fullscreen-btn="videoInfo_0.showFullscreenBtn"
|
|
||||||
:enable-progress-gesture="videoInfo_0.enableProgressGesture" @timeupdate="timeupdate(0,$event)"
|
|
||||||
@ended='ended' :show-play-btn="videoInfo_0.showPlayBtn" :show-progress="videoInfo_0.showProgress"
|
|
||||||
initial-time="0" id='video_id_0' @play="playing(0)" :muted="videoInfo_0.isMuted"
|
|
||||||
webkit-playsinline="true" playsinline="true">
|
|
||||||
</video>
|
|
||||||
<cover-view v-if="!videoInfo_0.flag" :style="stopIcon" class="cover-view-stop" />
|
|
||||||
<cover-view v-if="cover && videoInfo_0.coverStatus" :style="fillScreen2" class="video-image">
|
|
||||||
<image :mode="videoInfo_0.mode || mode" :src="videoInfo_0.coverUrl" :style="fillScreen"></image>
|
|
||||||
</cover-view>
|
|
||||||
<view class="video-action" @touchstart.stop='videotouchstart' @touchmove.stop="videotochmove"
|
|
||||||
@touchend.stop='videotouchend' @click.stop="videoClick"></view>
|
|
||||||
<!-- 视频文本区域 - 每个视频都有 -->
|
|
||||||
<view class="video-texts">
|
|
||||||
<view class="flex-row-center" style="flex: 1;">
|
|
||||||
<text class="video-title">{{ videoInfo_0.src }}</text>
|
|
||||||
<text class="video-score">评分 4.8</text>
|
|
||||||
</view>
|
|
||||||
<view class="flex-row-center-between" style="flex: 1;">
|
|
||||||
<text class="video-text">{{videoInfo_0.name}}</text>
|
|
||||||
<!-- 声音图标 - 绑定0号视频的状态，点击切换静音 -->
|
|
||||||
<image class="video-sound"
|
|
||||||
:src="videoInfo_0.isMuted ? '/static/images/icons/sound_no.png' : '/static/images/icons/sound_yes.png'"
|
|
||||||
@click.stop="toggleMute(0)"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="video-box" :style="itemViewTopLength1">
|
|
||||||
<video :src="videoInfo_1.src" :style="fillScreen" :autoplay="videoInfo_1.autoplay"
|
|
||||||
:loop="videoInfo_1.loop" :controls="videoInfo_1.controls"
|
|
||||||
:enable-play-gesture="videoInfo_1.enablePlayGesture" :objectFit="videoInfo_1.objectFit || objectFit"
|
|
||||||
:show-fullscreen-btn="videoInfo_1.showFullscreenBtn"
|
|
||||||
:enable-progress-gesture="videoInfo_1.enableProgressGesture" @timeupdate="timeupdate(1,$event)"
|
|
||||||
@ended='ended' :show-play-btn="videoInfo_1.showPlayBtn" :show-progress="videoInfo_1.showProgress"
|
|
||||||
initial-time="0" id='video_id_1' @play="playing(1)" :muted="videoInfo_1.isMuted"
|
|
||||||
webkit-playsinline="true" playsinline="true">
|
|
||||||
</video>
|
|
||||||
<cover-view v-if="!videoInfo_1.flag" :style="stopIcon" class="cover-view-stop" />
|
|
||||||
<cover-view v-if="cover && videoInfo_1.coverStatus" :style="fillScreen2" class="video-image">
|
|
||||||
<image :mode="videoInfo_1.mode || mode" :src="videoInfo_1.coverUrl" :style="fillScreen"></image>
|
|
||||||
</cover-view>
|
|
||||||
<view class="video-action" @touchstart='videotouchstart' @touchmove="videotochmove"
|
|
||||||
@touchend='videotouchend' @click="videoClick"></view>
|
|
||||||
<!-- 视频文本区域 - 1号视频 -->
|
|
||||||
<view class="video-texts">
|
|
||||||
<view class="flex-row-center" style="flex: 1;">
|
|
||||||
<text class="video-title">珍草品汇理疗馆珍馆服务流程11订单</text>
|
|
||||||
<text class="video-score">评分 4.8</text>
|
|
||||||
</view>
|
|
||||||
<view class="flex-row-center-between" style="flex: 1;">
|
|
||||||
<text class="video-text">{{videoInfo_1.name}}</text>
|
|
||||||
<!-- 声音图标 - 绑定1号视频的状态 -->
|
|
||||||
<image class="video-sound"
|
|
||||||
:src="videoInfo_1.isMuted ? '/static/images/icons/sound_no.png' : '/static/images/icons/sound_yes.png'"
|
|
||||||
@click.stop="toggleMute(1)"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="video-box" :style="itemViewTopLength2">
|
|
||||||
<video :src="videoInfo_2.src" :style="fillScreen" :autoplay="videoInfo_2.autoplay"
|
|
||||||
:loop="videoInfo_2.loop" :controls="videoInfo_2.controls"
|
|
||||||
:enable-play-gesture="videoInfo_2.enablePlayGesture" :objectFit="videoInfo_2.objectFit || objectFit"
|
|
||||||
:show-fullscreen-btn="videoInfo_2.showFullscreenBtn"
|
|
||||||
:enable-progress-gesture="videoInfo_2.enableProgressGesture" @timeupdate="timeupdate(2,$event)"
|
|
||||||
@ended='ended' :show-play-btn="videoInfo_2.showPlayBtn" :show-progress="videoInfo_2.showProgress"
|
|
||||||
initial-time="0" id='video_id_2' @play="playing(2)" :muted="videoInfo_2.isMuted"
|
|
||||||
webkit-playsinline="true" playsinline="true">
|
|
||||||
</video>
|
|
||||||
<cover-view v-if="!videoInfo_2.flag" :style="stopIcon" class="cover-view-stop" />
|
|
||||||
<cover-view v-if="cover && videoInfo_2.coverStatus" :style="fillScreen2" class="video-image">
|
|
||||||
<image :mode="videoInfo_2.mode || mode" :src="videoInfo_2.coverUrl" :style="fillScreen"></image>
|
|
||||||
</cover-view>
|
|
||||||
<view class="video-action" @touchstart='videotouchstart' @touchmove="videotochmove"
|
|
||||||
@touchend='videotouchend' @click="videoClick"></view>
|
|
||||||
<!-- 视频文本区域 - 2号视频 -->
|
|
||||||
<view class="video-texts">
|
|
||||||
<view class="flex-row-center" style="flex: 1;">
|
|
||||||
<text class="video-title">珍草品汇理疗馆珍馆服务流程11订单</text>
|
|
||||||
<text class="video-score">评分 4.8</text>
|
|
||||||
</view>
|
|
||||||
<view class="flex-row-center-between" style="flex: 1;">
|
|
||||||
<text class="video-text">{{videoInfo_2.name}}</text>
|
|
||||||
<!-- 声音图标 - 绑定2号视频的状态 -->
|
|
||||||
<image class="video-sound"
|
|
||||||
:src="videoInfo_2.isMuted ? '/static/images/icons/sound_no.png' : '/static/images/icons/sound_yes.png'"
|
|
||||||
@click.stop="toggleMute(2)"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="video-box" :style="itemViewTopLength3">
|
|
||||||
<video :src="videoInfo_3.src" :style="fillScreen" :autoplay="videoInfo_3.autoplay"
|
|
||||||
:loop="videoInfo_3.loop" :controls="videoInfo_3.controls"
|
|
||||||
:enable-play-gesture="videoInfo_3.enablePlayGesture" :objectFit="videoInfo_3.objectFit || objectFit"
|
|
||||||
:show-fullscreen-btn="videoInfo_3.showFullscreenBtn"
|
|
||||||
:enable-progress-gesture="videoInfo_3.enableProgressGesture" @timeupdate="timeupdate(3,$event)"
|
|
||||||
@ended='ended' :show-play-btn="videoInfo_3.showPlayBtn" :show-progress="videoInfo_3.showProgress"
|
|
||||||
initial-time="0" id='video_id_3' @play="playing(3)" :muted="videoInfo_3.isMuted"
|
|
||||||
webkit-playsinline="true" playsinline="true">
|
|
||||||
</video>
|
|
||||||
<cover-view v-if="!videoInfo_3.flag" :style="stopIcon" class="cover-view-stop" />
|
|
||||||
<cover-view v-if="cover && videoInfo_3.coverStatus" :style="fillScreen2" class="video-image">
|
|
||||||
<image :mode="videoInfo_3.mode || mode" :src="videoInfo_3.coverUrl" :style="fillScreen"></image>
|
|
||||||
</cover-view>
|
|
||||||
<view class="video-action" @touchstart='videotouchstart' @touchmove="videotochmove"
|
|
||||||
@touchend='videotouchend' @click="videoClick"></view>
|
|
||||||
<!-- 视频文本区域 - 3号视频 -->
|
|
||||||
<view class="video-texts">
|
|
||||||
<view class="flex-row-center" style="flex: 1;">
|
|
||||||
<text class="video-title">珍草品汇理疗馆珍馆服务流程11订单</text>
|
|
||||||
<text class="video-score">评分 4.8</text>
|
|
||||||
</view>
|
|
||||||
<view class="flex-row-center-between" style="flex: 1;">
|
|
||||||
<text class="video-text">{{videoInfo_3.name}}</text>
|
|
||||||
<!-- 声音图标 - 绑定3号视频的状态 -->
|
|
||||||
<image class="video-sound"
|
|
||||||
:src="videoInfo_3.isMuted ? '/static/images/icons/sound_no.png' : '/static/images/icons/sound_yes.png'"
|
|
||||||
@click.stop="toggleMute(3)"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view class="video-box" :style="itemViewTopLength4">
|
|
||||||
<video :src="videoInfo_4.src" :style="fillScreen" :autoplay="videoInfo_4.autoplay"
|
|
||||||
:loop="videoInfo_4.loop" :controls="videoInfo_4.controls"
|
|
||||||
:enable-play-gesture="videoInfo_4.enablePlayGesture" :objectFit="videoInfo_4.objectFit || objectFit"
|
|
||||||
:show-fullscreen-btn="videoInfo_4.showFullscreenBtn"
|
|
||||||
:enable-progress-gesture="videoInfo_4.enableProgressGesture" @timeupdate="timeupdate(4,$event)"
|
|
||||||
@ended='ended' :show-play-btn="videoInfo_4.showPlayBtn" :show-progress="videoInfo_4.showProgress"
|
|
||||||
initial-time="0" id='video_id_4' @play="playing(4)" :muted="videoInfo_4.isMuted"
|
|
||||||
webkit-playsinline="true" playsinline="true">
|
|
||||||
</video>
|
|
||||||
<cover-view v-if="!videoInfo_4.flag" :style="stopIcon" class="cover-view-stop" />
|
|
||||||
<cover-view v-if="cover && videoInfo_4.coverStatus" :style="fillScreen2" class="video-image">
|
|
||||||
<image :mode="videoInfo_4.mode || mode" :src="videoInfo_4.coverUrl" :style="fillScreen"></image>
|
|
||||||
</cover-view>
|
|
||||||
<view class="video-action" @touchstart='videotouchstart' @touchmove="videotochmove"
|
|
||||||
@touchend='videotouchend' @click="videoClick"></view>
|
|
||||||
<!-- 视频文本区域 - 4号视频 -->
|
|
||||||
<view class="video-texts">
|
|
||||||
<view class="flex-row-center" style="flex: 1;">
|
|
||||||
<text class="video-title">珍草品汇理疗馆珍馆服务流程11订单</text>
|
|
||||||
<text class="video-score">评分 4.8</text>
|
|
||||||
</view>
|
|
||||||
<view class="flex-row-center-between" style="flex: 1;">
|
|
||||||
<text class="video-text">{{videoInfo_4.name}}</text>
|
|
||||||
<!-- 声音图标 - 绑定4号视频的状态 -->
|
|
||||||
<image class="video-sound"
|
|
||||||
:src="videoInfo_4.isMuted ? '/static/images/icons/sound_no.png' : '/static/images/icons/sound_yes.png'"
|
|
||||||
@click.stop="toggleMute(4)"></image>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<view @touchend='progressTouchend' class="progress-view">
|
|
||||||
<uv-slider v-if="showSlider" v-model="progressValue" activeColor="#D8D8D8" block-size="6"
|
|
||||||
backgroundColor="#494949;" class="progress-slider"></uv-slider>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<!-- 修改：Dot指示器 - 最多显示5个 -->
|
|
||||||
<view class="dots" :style="{top:`${0.5*winHeight}px`}" v-if="videoListLength > 1">
|
|
||||||
<view class="dots-container">
|
|
||||||
<view class="dot-item" v-for="(dotIndex, idx) in visibleDots" :key="idx"
|
|
||||||
:class="{ active: dotIndex === videoIndex }" @click="jumpToVideo(dotIndex)"></view>
|
|
||||||
</view>
|
|
||||||
<text class="pageNumber">
|
|
||||||
{{ videoIndex+1 }}/{{ videoListLength }}
|
|
||||||
</text>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
|
<!-- 自定义操作按钮 -->
|
||||||
|
<view class="btn-wrap">
|
||||||
|
<button type="primary" size="default" @click="openFullScreen">
|
||||||
|
手动横屏全屏播放
|
||||||
|
</button>
|
||||||
|
<button type="warn" size="default" @click="closeFullScreen">
|
||||||
|
退出全屏
|
||||||
|
</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
let VIDEO_LIST = []
|
|
||||||
let initVideoInfo = {
|
|
||||||
src: "",
|
|
||||||
coverStatus: true,
|
|
||||||
coverUrl: "",
|
|
||||||
flag: false,
|
|
||||||
objectFit: "",
|
|
||||||
mode: "",
|
|
||||||
isMuted: false, // 默认不静音
|
|
||||||
autoplay: false,
|
|
||||||
loop: true,
|
|
||||||
controls: false,
|
|
||||||
enablePlayGesture: true,
|
|
||||||
showFullscreenBtn: false,
|
|
||||||
enableProgressGesture: false,
|
|
||||||
showPlayBtn: false,
|
|
||||||
showProgress: false
|
|
||||||
}
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
|
||||||
popVideoList: {
|
|
||||||
type: Array,
|
|
||||||
default: [] // 默认值设为空数组JSON，避免parse报错
|
|
||||||
},
|
|
||||||
marginTop: {
|
|
||||||
type: String,
|
|
||||||
default: "88" // 默认值设为空数组JSON，避免parse报错
|
|
||||||
}
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
playSetTime:null,
|
// 测试视频地址，替换自己的
|
||||||
showSlider: true,
|
videoUrl: "https://www.w3school.com.cn/i/movie.mp4",
|
||||||
progressTime: 0,
|
videoContext: null
|
||||||
progressValue: 0,
|
|
||||||
boxHeight: 0,
|
|
||||||
objectFit: "fill",
|
|
||||||
mode: "scaleToFill",
|
|
||||||
winWidth: 1,
|
|
||||||
winHeight: 1,
|
|
||||||
videoIndex: 0,
|
|
||||||
viewTop: 0,
|
|
||||||
viewTopPostion: 0,
|
|
||||||
videoList: [],
|
|
||||||
videoListLength: 0,
|
|
||||||
itemViewTop0: 0,
|
|
||||||
itemViewTop1: 0,
|
|
||||||
itemViewTop2: 0,
|
|
||||||
itemViewTop3: 0,
|
|
||||||
itemViewTop4: 0,
|
|
||||||
videoInfo_0: initVideoInfo,
|
|
||||||
videoInfo_1: initVideoInfo,
|
|
||||||
videoInfo_2: initVideoInfo,
|
|
||||||
videoInfo_3: initVideoInfo,
|
|
||||||
videoInfo_4: initVideoInfo,
|
|
||||||
stopIcon: '',
|
|
||||||
videotouchstartTimestamp: 0,
|
|
||||||
videotouchendTimestamp: 0,
|
|
||||||
moveView: true,
|
|
||||||
cover: true,
|
|
||||||
slidingStatus: false,
|
|
||||||
videoPlayingStatus: false,
|
|
||||||
preloadedIndex: [],
|
|
||||||
startPageY: 0,
|
|
||||||
endPageY: 0,
|
|
||||||
// 新增：控制可视dot的数组
|
|
||||||
visibleDots: [],
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
onReady() {
|
||||||
// videoList: {
|
// 初始化视频实例
|
||||||
// handler(newVal, oldVal) {
|
this.videoContext = uni.createVideoContext("fullVideo", this);
|
||||||
|
|
||||||
|
|
||||||
// },
|
|
||||||
// immediate: true, // 可选：组件初始化时立即执行一次（即使值未变化）
|
|
||||||
// deep: false // 普通类型无需深度监听，默认false
|
|
||||||
// }
|
|
||||||
},
|
|
||||||
created(options) {
|
|
||||||
//#ifdef APP-PLUS
|
|
||||||
plus.screen.lockOrientation("portrait-primary")
|
|
||||||
//#endif
|
|
||||||
if (this.popVideoList.length) {
|
|
||||||
try {
|
|
||||||
VIDEO_LIST = []
|
|
||||||
this.popVideoList.forEach((item, index) => {
|
|
||||||
let obj = {
|
|
||||||
"src": "",
|
|
||||||
"coverStatus": true,
|
|
||||||
"coverUrl": "",
|
|
||||||
"flag": false,
|
|
||||||
"objectFit": "contain",
|
|
||||||
"mode": "aspectFit",
|
|
||||||
"isMuted": false, // 默认不静音
|
|
||||||
"autoplay": false,
|
|
||||||
"loop": true,
|
|
||||||
"controls": false,
|
|
||||||
"enablePlayGesture": true,
|
|
||||||
"showFullscreenBtn": false,
|
|
||||||
"enableProgressGesture": false,
|
|
||||||
"showPlayBtn": false,
|
|
||||||
"showProgress": false,
|
|
||||||
"name": ""
|
|
||||||
}
|
|
||||||
obj.name = item.name
|
|
||||||
obj.src = item.url
|
|
||||||
obj.coverUrl = item.url +
|
|
||||||
`?x-oss-process=video/snapshot,t_1000,m_fast,f_jpg,w_600,ar_auto`
|
|
||||||
VIDEO_LIST.push(obj)
|
|
||||||
if (index == 0) {
|
|
||||||
initVideoInfo = obj
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} catch (e) {}
|
|
||||||
this.getSystemInfo();
|
|
||||||
this.videoList = VIDEO_LIST;
|
|
||||||
this.videoListLength = this.videoList.length;
|
|
||||||
this.boxHeight = this.videoListLength * this.winHeight;
|
|
||||||
for (let i = 0; i < 5; i++) {
|
|
||||||
if (this.videoList[i]) {
|
|
||||||
this['videoInfo_' + i] = this.videoList[i]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// 初始化可视dot范围
|
|
||||||
this.updateVisibleDots();
|
|
||||||
// setTimeout(() => {
|
|
||||||
// this.playVideo(0)
|
|
||||||
// }, 500)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
onUnload() {
|
|
||||||
for (let i = 0; i < 5; i++) {
|
|
||||||
this.unloadVideo(i)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
getVideoTop() {
|
|
||||||
return uni.upx2px(this.marginTop)
|
|
||||||
},
|
|
||||||
viewTopLength() {
|
|
||||||
return `height:${this.boxHeight}px;top:${this.viewTop}px;`
|
|
||||||
},
|
|
||||||
fillScreen() {
|
|
||||||
let style = `height:${this.winHeight}px;width:${this.winWidth}px;`
|
|
||||||
return style
|
|
||||||
},
|
|
||||||
fillScreen2() {
|
|
||||||
let style = `height:auto;width:${this.winWidth}px;`
|
|
||||||
return style
|
|
||||||
},
|
|
||||||
itemViewTopLength0() {
|
|
||||||
return `height:${this.winHeight}px;top:${this.itemViewTop0}px;`
|
|
||||||
},
|
|
||||||
itemViewTopLength1() {
|
|
||||||
return `height:${this.winHeight}px;top:${this.itemViewTop1}px;`
|
|
||||||
},
|
|
||||||
itemViewTopLength2() {
|
|
||||||
return `height:${this.winHeight}px;top:${this.itemViewTop2}px;`
|
|
||||||
},
|
|
||||||
itemViewTopLength3() {
|
|
||||||
return `height:${this.winHeight}px;top:${this.itemViewTop3}px;`
|
|
||||||
},
|
|
||||||
itemViewTopLength4() {
|
|
||||||
return `height:${this.winHeight}px;top:${this.itemViewTop4}px;`
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 新增：切换视频静音状态
|
// 进入横屏全屏
|
||||||
toggleMute(videoNum) {
|
openFullScreen() {
|
||||||
// 1. 切换数据层状态
|
// direction 90：横屏；-90反向横屏；0自适应
|
||||||
this['videoInfo_' + videoNum].isMuted = !this['videoInfo_' + videoNum].isMuted;
|
this.videoContext.requestFullScreen({
|
||||||
// 2. 同步视频实例静音状态（恢复并完善原有注释代码，加容错）
|
direction: 90
|
||||||
const videoCtx = uni.createVideoContext("video_id_" + videoNum, this);
|
});
|
||||||
if (videoCtx) {
|
|
||||||
videoCtx.mute(this['videoInfo_' + videoNum].isMuted);
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
// 修改：点击dot跳转 - 传真实的视频索引
|
// 退出全屏
|
||||||
jumpToVideo(targetIndex) {
|
closeFullScreen() {
|
||||||
if (targetIndex === this.videoIndex || this.slidingStatus) return;
|
this.videoContext.exitFullScreen();
|
||||||
this.stopVideo(this.videoIndex % 5, true);
|
|
||||||
const diff = targetIndex - this.videoIndex;
|
|
||||||
this.videoIndex = targetIndex;
|
|
||||||
this.viewTopPostion = -this.videoIndex * this.winHeight;
|
|
||||||
this.viewTop = this.viewTopPostion;
|
|
||||||
if (this.videoListLength > 5) {
|
|
||||||
this.sortItemView(diff > 0 ? -1 : 1);
|
|
||||||
}
|
|
||||||
// 更新可视dot范围
|
|
||||||
this.updateVisibleDots();
|
|
||||||
setTimeout(() => {
|
|
||||||
this.playVideo(this.videoIndex % 5);
|
|
||||||
}, 400);
|
|
||||||
},
|
},
|
||||||
// 核心：更新可视dot范围 - 最多显示5个
|
// 播放监听
|
||||||
updateVisibleDots() {
|
onPlay() {
|
||||||
const maxShow = 5;
|
console.log("视频开始播放");
|
||||||
const total = this.videoListLength;
|
|
||||||
// 视频总数 ≤ 5，显示全部
|
|
||||||
if (total <= maxShow) {
|
|
||||||
this.visibleDots = Array.from({
|
|
||||||
length: total
|
|
||||||
}, (_, i) => i);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// 视频总数 > 5，显示包含当前索引的5个dot
|
|
||||||
// 计算起始索引，避免越界
|
|
||||||
let start = Math.max(0, Math.min(this.videoIndex - 2, total - maxShow));
|
|
||||||
// 生成5个连续的索引
|
|
||||||
this.visibleDots = Array.from({
|
|
||||||
length: maxShow
|
|
||||||
}, (_, i) => start + i);
|
|
||||||
},
|
},
|
||||||
progressTouchend() {
|
// 暂停监听
|
||||||
let s = Math.round(this.progressValue / 100 * this.time)
|
onPause() {
|
||||||
let i = this.videoIndex % 5
|
console.log("视频暂停");
|
||||||
uni.createVideoContext("video_id_" + i, this).seek(s)
|
|
||||||
uni.createVideoContext("video_id_" + i, this).play()
|
|
||||||
},
|
},
|
||||||
sliderchanging(e) {
|
// 全屏状态切换监听
|
||||||
console.log(3333, e)
|
handleFullScreenChange(e) {
|
||||||
},
|
if (e.detail.fullScreen) {
|
||||||
getSystemInfo() {
|
uni.setNavigationBarHidden(true); // 全屏隐藏顶部导航
|
||||||
var _this = this;
|
|
||||||
uni.getSystemInfo({
|
|
||||||
success: function(res) {
|
|
||||||
_this.winWidth = res.windowWidth;
|
|
||||||
_this.winHeight = res.windowHeight;
|
|
||||||
let p = uni.upx2px(150)
|
|
||||||
_this.stopIcon = `left:${(res.windowWidth - p)/2}px;top:${(res.windowHeight - p)/2}px;`
|
|
||||||
_this.itemViewTop1 = res.windowHeight
|
|
||||||
_this.itemViewTop2 = res.windowHeight * 2
|
|
||||||
_this.itemViewTop3 = res.windowHeight * 3
|
|
||||||
_this.itemViewTop4 = res.windowHeight * 4
|
|
||||||
},
|
|
||||||
})
|
|
||||||
},
|
|
||||||
unloadVideo(index) {
|
|
||||||
if (index < 0 || index >= this.videoListLength) return;
|
|
||||||
const nodeNum = index % 5;
|
|
||||||
const videoCtx = uni.createVideoContext("video_id_" + nodeNum, this);
|
|
||||||
videoCtx.stop();
|
|
||||||
this.preloadedIndex = this.preloadedIndex.filter(item => item !== index);
|
|
||||||
},
|
|
||||||
playVideo(num) {
|
|
||||||
clearTimeout(this.playSetTime)
|
|
||||||
uni.$uv.debounce(() => {
|
|
||||||
this.videoPlayingStatus = true
|
|
||||||
this["videoInfo_" + num].flag = true
|
|
||||||
let VideoContext = uni.createVideoContext("video_id_" + num, this)
|
|
||||||
this.playSetTime = setTimeout(() => {
|
|
||||||
VideoContext.play()
|
|
||||||
}, 400)
|
|
||||||
}, 30)
|
|
||||||
},
|
|
||||||
stopVideo(num, control = false) {
|
|
||||||
const videoCtx = uni.createVideoContext("video_id_" + num, this);
|
|
||||||
if (!control) {
|
|
||||||
this['videoInfo_' + num].coverStatus = true;
|
|
||||||
videoCtx.stop()
|
|
||||||
} else {
|
} else {
|
||||||
videoCtx.pause()
|
uni.setNavigationBarHidden(false); // 退出恢复导航
|
||||||
}
|
}
|
||||||
this["videoInfo_" + num].flag = false
|
console.log("当前全屏状态：", e.detail.fullScreen);
|
||||||
},
|
},
|
||||||
nowPlayVideo() {
|
// 视频播放结束
|
||||||
clearTimeout(this.playSetTime)
|
onVideoEnd() {
|
||||||
uni.$uv.debounce(() => {
|
// 播放完毕自动退出全屏
|
||||||
this.videoPlayingStatus = true
|
this.videoContext.exitFullScreen();
|
||||||
this["videoInfo_" + this.videoIndex].flag = true
|
|
||||||
let VideoContext = uni.createVideoContext("video_id_" + this.videoIndex, this)
|
|
||||||
this.playSetTime = setTimeout(() => {
|
|
||||||
VideoContext.play()
|
|
||||||
}, 400)
|
|
||||||
}, 30)
|
|
||||||
},
|
|
||||||
nowStopVideo() {
|
|
||||||
const videoCtx = uni.createVideoContext("video_id_" + this.videoIndex, this);
|
|
||||||
videoCtx.pause()
|
|
||||||
this["videoInfo_" + this.videoIndex].flag = false
|
|
||||||
},
|
|
||||||
videoClick() {
|
|
||||||
let num = this.videoIndex % 5
|
|
||||||
if (this["videoInfo_" + num].flag) {
|
|
||||||
this.stopVideo(num, true)
|
|
||||||
} else {
|
|
||||||
this.playVideo(num, true)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
videotouchstart(e) {
|
|
||||||
this.videotouchendTimestamp = this.videotouchstartTimestamp
|
|
||||||
this.videotouchstartTimestamp = e.timestamp
|
|
||||||
if ((this.videotouchstartTimestamp - this.videotouchendTimestamp) < 500) return
|
|
||||||
if (this.slidingStatus) return
|
|
||||||
this.startPageY = e.changedTouches[0].screenY;
|
|
||||||
},
|
|
||||||
videotochmove(e) {
|
|
||||||
if ((this.videotouchstartTimestamp - this.videotouchendTimestamp) < 500) return
|
|
||||||
if (this.slidingStatus) return
|
|
||||||
this.endPageY = e.changedTouches[0].screenY;
|
|
||||||
let sliding = this.endPageY - this.startPageY
|
|
||||||
if (sliding > 20 || sliding < -20) {
|
|
||||||
this.moveView = false
|
|
||||||
} else {
|
|
||||||
this.moveView = true
|
|
||||||
}
|
|
||||||
if (this.videoIndex == 0 && sliding > 50) {
|
|
||||||
this.viewTop = 50
|
|
||||||
} else if (this.videoIndex == this.videoListLength - 1 && sliding < 0) {
|
|
||||||
this.viewTop = this.viewTopPostion
|
|
||||||
} else {
|
|
||||||
this.viewTop = this.viewTopPostion + sliding
|
|
||||||
}
|
|
||||||
},
|
|
||||||
videotouchend(e) {
|
|
||||||
if ((this.videotouchstartTimestamp - this.videotouchendTimestamp) < 500) return
|
|
||||||
if (this.slidingStatus) return
|
|
||||||
this.moveView = true
|
|
||||||
this.endPageY = e.changedTouches[0].screenY;
|
|
||||||
let sliding = this.endPageY - this.startPageY
|
|
||||||
if ((sliding >= -40 && sliding < 0) || (sliding <= 40 && sliding > 0)) {
|
|
||||||
this.slidingStatus = true
|
|
||||||
this.videoSlidingReset(sliding)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (sliding < -30) {
|
|
||||||
this.slidingStatus = true
|
|
||||||
if (this.videoIndex == this.videoListLength - 1) {
|
|
||||||
this.videoSlidingReset(sliding)
|
|
||||||
uni.showToast({
|
|
||||||
title: "已经到底了",
|
|
||||||
icon: "none"
|
|
||||||
})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.moveView = false
|
|
||||||
this.videoSlidingToTop(sliding)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (sliding > 30) {
|
|
||||||
this.slidingStatus = true
|
|
||||||
if (this.videoIndex == 0) {
|
|
||||||
this.videoSlidingReset(sliding)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.moveView = false
|
|
||||||
this.videoSlidingToBottom(sliding)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
videoSlidingReset(sliding) {
|
|
||||||
this.viewTop = this.viewTopPostion
|
|
||||||
this.slidingStatus = false
|
|
||||||
},
|
|
||||||
videoSlidingToTop(sliding) {
|
|
||||||
this.stopVideo(this.videoIndex % 5, true)
|
|
||||||
this.videoIndex++
|
|
||||||
if (this.videoListLength > 5) {
|
|
||||||
this.sortItemView(sliding)
|
|
||||||
}
|
|
||||||
this.viewTopPostion = this.viewTopPostion - this.winHeight
|
|
||||||
setTimeout(() => {
|
|
||||||
this.playVideo(this.videoIndex % 5)
|
|
||||||
}, 5)
|
|
||||||
let timer = setInterval(() => {
|
|
||||||
this.viewTop = this.viewTop - 35
|
|
||||||
if (this.viewTop < (this.viewTopPostion + 10)) {
|
|
||||||
this.viewTop = this.viewTopPostion
|
|
||||||
clearInterval(timer)
|
|
||||||
this.slidingStatus = false
|
|
||||||
this.slidingCallback()
|
|
||||||
}
|
|
||||||
}, 3)
|
|
||||||
},
|
|
||||||
videoSlidingToBottom(sliding) {
|
|
||||||
this.stopVideo(this.videoIndex % 5, true)
|
|
||||||
this.videoIndex--
|
|
||||||
if (this.videoListLength > 5) {
|
|
||||||
this.sortItemView(sliding)
|
|
||||||
}
|
|
||||||
this.viewTopPostion = this.viewTopPostion + this.winHeight
|
|
||||||
setTimeout(() => {
|
|
||||||
this.playVideo(this.videoIndex % 5)
|
|
||||||
}, 5)
|
|
||||||
let timer = setInterval(() => {
|
|
||||||
this.viewTop = this.viewTop + 35
|
|
||||||
if (this.viewTop > (this.viewTopPostion - 10)) {
|
|
||||||
this.viewTop = this.viewTopPostion
|
|
||||||
clearInterval(timer)
|
|
||||||
this.slidingStatus = false
|
|
||||||
this.slidingCallback()
|
|
||||||
}
|
|
||||||
}, 3)
|
|
||||||
},
|
|
||||||
// 修改：滑动结束后更新可视dot
|
|
||||||
slidingCallback() {
|
|
||||||
this.progressValue = 0
|
|
||||||
this.updateVisibleDots();
|
|
||||||
},
|
|
||||||
//滑动组件排序
|
|
||||||
sortItemView(silding) {
|
|
||||||
// 向上滑动
|
|
||||||
if (silding < 0) {
|
|
||||||
if (this.videoIndex > 2 && this.videoIndex < this.videoListLength - 2) {
|
|
||||||
let i = (this.videoIndex - 3) % 5
|
|
||||||
this["itemViewTop" + i] = this["itemViewTop" + i] + this.winHeight * 5
|
|
||||||
this['videoInfo_' + i] = this.videoList[this.videoIndex + 2]
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
// 向下滑动
|
|
||||||
if (silding > 0) {
|
|
||||||
if (this.videoIndex > 1 && this.videoIndex < this.videoListLength - 3) {
|
|
||||||
let i = (this.videoIndex + 3) % 5
|
|
||||||
this["itemViewTop" + i] = this["itemViewTop" + i] - this.winHeight * 5
|
|
||||||
this['videoInfo_' + i] = this.videoList[this.videoIndex - 2]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
playing(i) {
|
|
||||||
setTimeout(() => {
|
|
||||||
this['videoInfo_' + i].coverStatus = false
|
|
||||||
this.moveView = true
|
|
||||||
this.slidingStatus = false
|
|
||||||
}, 600)
|
|
||||||
},
|
|
||||||
timeupdate(i, e) {
|
|
||||||
if (this.videoPlayingStatus) {
|
|
||||||
this.slidingStatus = false
|
|
||||||
this.videoPlayingStatus = false
|
|
||||||
setTimeout(() => {
|
|
||||||
this['videoInfo_' + i].coverStatus = false
|
|
||||||
this.moveView = true
|
|
||||||
}, 200)
|
|
||||||
}
|
|
||||||
this["videoInfo_" + i].flag = true
|
|
||||||
if (e.detail.duration >= this.progressTime) {
|
|
||||||
if (this.videoIndex%5 == i) {
|
|
||||||
this.time = e.detail.duration
|
|
||||||
this.progress = e.detail.currentTime
|
|
||||||
this.progressValue = (e.detail.currentTime / e.detail.duration) * 100
|
|
||||||
}
|
|
||||||
|
|
||||||
this.showProgress = true
|
|
||||||
} else {
|
|
||||||
this.showProgress = false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
ended() {
|
|
||||||
let num = this.videoIndex % 5
|
|
||||||
this["videoInfo_" + num].flag = false
|
|
||||||
this.progressValue = 0
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less">
|
<style scoped>
|
||||||
.view-box {
|
.video-page {
|
||||||
// position: fixed;
|
padding: 15rpx;
|
||||||
// left: 0;
|
|
||||||
// right: 0;
|
|
||||||
background-color: #000;
|
|
||||||
// z-index: 900;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.video-box {
|
.video-box {
|
||||||
position: absolute;
|
width: 100%;
|
||||||
left: 0;
|
height: 420rpx;
|
||||||
right: 0;
|
border-radius: 12rpx;
|
||||||
z-index: 2000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-image {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 2001;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-action {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
z-index: 2008;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-texts {
|
|
||||||
position: absolute;
|
|
||||||
left: 30rpx;
|
|
||||||
right: 30rpx;
|
|
||||||
bottom: 120rpx;
|
|
||||||
z-index: 2009; // 确保在视频上方显示
|
|
||||||
|
|
||||||
.video-title {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
lines: 1;
|
|
||||||
max-width: 240rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-score {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 24rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
margin-left: 20rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-text {
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 28rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.video-sound {
|
|
||||||
width: 44rpx;
|
|
||||||
height: 42rpx;
|
|
||||||
cursor: pointer; // 点击指针，提示可点击
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.cover-view-stop {
|
|
||||||
position: absolute;
|
|
||||||
z-index: 9999;
|
|
||||||
width: 150rpx;
|
|
||||||
height: 200rpx;
|
|
||||||
background-color: rgba(0, 0, 0, 0.3);
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress-view {
|
|
||||||
z-index: 9999;
|
|
||||||
position: fixed;
|
|
||||||
left: 30rpx;
|
|
||||||
right: 30rpx;
|
|
||||||
bottom: 80rpx;
|
|
||||||
|
|
||||||
.progress-slider {}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 修改：Dot指示器样式 - 最多显示5个 + 过渡动画
|
|
||||||
.dots {
|
|
||||||
position: fixed;
|
|
||||||
left: 20rpx;
|
|
||||||
top: 0;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
z-index: 9999;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
.dots-container {
|
|
||||||
// 限制最多显示5个，超出隐藏
|
|
||||||
width: fit-content;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
margin: auto 0;
|
|
||||||
|
|
||||||
.dot-item {
|
|
||||||
width: 10rpx;
|
|
||||||
height: 10rpx;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border-radius: 50%;
|
|
||||||
// 核心：过渡动画，切换更丝滑
|
|
||||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
cursor: pointer;
|
|
||||||
margin-bottom: 10rpx;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
width: 10rpx;
|
|
||||||
height: 30rpx;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border-radius: 5rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.pageNumber {
|
.btn-wrap {
|
||||||
font-weight: bold;
|
margin-top: 30rpx;
|
||||||
font-size: 28rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
line-height: 36rpx;
|
|
||||||
text-align: left;
|
|
||||||
font-style: normal;
|
|
||||||
margin-left: 6rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-row-center-between {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
gap: 20rpx;
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-row-start-between {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-row-center-center {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-row-center {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-row-start {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flex-row-end-between {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: flex-end;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
@ -0,0 +1,106 @@
|
||||||
|
<template>
|
||||||
|
<view class="video-page">
|
||||||
|
<!-- 原生视频组件：全端兼容 -->
|
||||||
|
<video id="fullVideo" class="video-box" :src="videoUrl" controls show-fullscreen-btn enable-progress-gesture
|
||||||
|
:autoplay="true" :loop="false" :muted="false" @play="onPlay" @pause="onPause" object-fit="cover" :direction="90"
|
||||||
|
@fullscreenchange="handleFullScreenChange" @ended="onVideoEnd" @fullscreenclick="tapback"></video>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
videoUrl: "",
|
||||||
|
videoContext: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
onLoad(options) {
|
||||||
|
console.log(options, '页面参数');
|
||||||
|
// 接收视频地址
|
||||||
|
if (options.url) {
|
||||||
|
this.videoUrl = options.url;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onReady() {
|
||||||
|
// #ifdef APP-PLUS
|
||||||
|
//plus.screen.unlockOrientation(); //解除屏幕方向的锁定，但是不一定是竖屏；
|
||||||
|
|
||||||
|
// #endif
|
||||||
|
// 初始化视频实例（唯一正确位置）
|
||||||
|
this.videoContext = uni.createVideoContext("fullVideo", this);
|
||||||
|
// 页面渲染完成后 安全触发自动全屏
|
||||||
|
//this.autoFullScreen();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
tapback(e) {
|
||||||
|
console.log('点击全屏按钮');
|
||||||
|
// if (e.target.fullScreen) {
|
||||||
|
// plus.screen.lockOrientation('landscape'); //锁死屏幕方向为竖屏
|
||||||
|
// }else{
|
||||||
|
// plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
// 自动全屏（核心：修复iOS方向错乱）
|
||||||
|
autoFullScreen() {
|
||||||
|
if (!this.videoContext) return;
|
||||||
|
|
||||||
|
// 区分平台设置方向：iOS用0自适应，安卓用90横屏
|
||||||
|
const direction = uni.getSystemInfoSync().platform === 'ios' ? 0 : 90;
|
||||||
|
|
||||||
|
// 延迟执行，避免视频未加载完成导致全屏失败
|
||||||
|
setTimeout(() => {
|
||||||
|
this.videoContext.requestFullScreen({
|
||||||
|
direction: direction
|
||||||
|
});
|
||||||
|
}, 300)
|
||||||
|
},
|
||||||
|
// 手动横屏全屏
|
||||||
|
openFullScreen() {
|
||||||
|
if (!this.videoContext) return;
|
||||||
|
const direction = uni.getSystemInfoSync().platform === 'ios' ? 0 : 90;
|
||||||
|
this.videoContext.requestFullScreen({
|
||||||
|
direction
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 退出全屏
|
||||||
|
closeFullScreen() {
|
||||||
|
if (!this.videoContext) return;
|
||||||
|
this.videoContext.exitFullScreen();
|
||||||
|
},
|
||||||
|
// 播放监听
|
||||||
|
onPlay() {
|
||||||
|
console.log("视频开始播放");
|
||||||
|
},
|
||||||
|
// 暂停监听
|
||||||
|
onPause() {
|
||||||
|
console.log("视频暂停");
|
||||||
|
},
|
||||||
|
// 全屏状态切换
|
||||||
|
handleFullScreenChange(e) {
|
||||||
|
// 全屏隐藏导航栏，退出显示
|
||||||
|
// uni.setNavigationBarHidden(!!e.detail.fullScreen);
|
||||||
|
console.log("全屏状态：", e.detail.fullScreen);
|
||||||
|
},
|
||||||
|
// 视频播放完毕
|
||||||
|
onVideoEnd() {
|
||||||
|
this.closeFullScreen();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.video-page {
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-box {
|
||||||
|
width: 100%;
|
||||||
|
/* 自适应高度，避免拉伸 */
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,52 +1,59 @@
|
||||||
<template>
|
<template>
|
||||||
<view class="container">
|
<view class="container">
|
||||||
<view class="positonFixed">
|
<view class="positonFixed">
|
||||||
<view class="header-top flex-row-center" :class="{videoTop:current==0}"
|
<view class="header-top flex-row-center" :style="{ height: `${100}rpx`,paddingTop:`${statusBarHeight}rpx`}">
|
||||||
:style="{ height: `${88+statusBarHeight}rpx`,paddingTop: `${statusBarHeight}rpx`}">
|
|
||||||
<view class="left-area" @click="goBack">
|
<view class="left-area" @click="goBack">
|
||||||
<image src="/static/images/whiteBack.png" mode="aspectFit" class="back-icon"></image>
|
<image src="/static/images/back.png" mode="aspectFit" class="back-icon"></image>
|
||||||
</view>
|
</view>
|
||||||
<view class="flex-row-center-center" style="flex: 1;margin-right: 18rpx;height:66rpx;">
|
<view class="flex-row-center-center" style="flex: 1;margin-right: 18rpx;height:66rpx;">
|
||||||
<uv-tabs :list="list" @click="tabsClick" itemStyle="height:66rpx;" :activeStyle="activeStyle"
|
<uv-tabs :list="list" @click="tabsClick" itemStyle="height:66rpx;" :activeStyle="activeStyle"
|
||||||
:inactiveStyle="inactiveStyle" :current="current" :lineColor="`rgba(232, 16, 30, 1)`"></uv-tabs>
|
:inactiveStyle="inactiveStyle" :current="current" :lineColor="`rgba(232, 16, 30, 1)`"></uv-tabs>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
<scroll-view scroll-x style="height: 100rpx;" v-if="current==1">
|
<scroll-view scroll-x style="height: 100rpx;background-color: #fff;" v-if="current==1">
|
||||||
<view class="container-tabs flex-row-center">
|
<view class="container-tabs flex-row-center">
|
||||||
<view class="container-tab flex-row-center-center" @click="clickTab(item)"
|
<view class="container-tab flex-row-center-center" @click="clickTab(item)"
|
||||||
:class="{active:cardListIndex==item.id}" v-for="(item,index) in cardList[1]" :key="index">
|
:class="{active:cardListIndex==item.id}" v-for="(item,index) in cardList[user_type]"
|
||||||
|
:key="index">
|
||||||
<text class="container-tab-text">{{ item.title }}</text>
|
<text class="container-tab-text">{{ item.title }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
<view :style="swiperStyle3"></view>
|
||||||
<view class="container-content" :style="swiperStyle2">
|
<view class="container-content" :style="swiperStyle2">
|
||||||
<swiper class="swiper" circular :style="swiperStyle" :current="current" @change="swiperChange" :disable-touch="current==0">
|
<swiper class="swiper" circular :style="swiperStyle" :current="current" @change="swiperChange"
|
||||||
|
:disable-touch="current==0">
|
||||||
<swiper-item>
|
<swiper-item>
|
||||||
<videoSlide ref="ideoSlideRrf" :popVideoList="videoList" :marginTop="`${88 + this.statusBarHeight}`" v-show="current==0" v-if="videoList.length"></videoSlide>
|
<scroll-view scroll-y :style="{height:`${viewportHeight-100-this.statusBarHeight}rpx`}">
|
||||||
|
<view class="swiper-items3">
|
||||||
|
<view class="swiper-item3" :class="{item2Left:index%2 == 0}"
|
||||||
|
v-for="(item,index) in videoList" :key="index" @click="tovideo(item)">
|
||||||
|
<image class="swiper-item3-video" mode="aspectFill" :src="item.img"></image>
|
||||||
|
<image
|
||||||
|
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/c6c039fc-99fd-492e-ae9a-ed43260c94ef.png"
|
||||||
|
mode="widthFix"
|
||||||
|
style="width: 80rpx;position: absolute;top: 50%;left: 50%;transform: translate3d(-50%, -50%, 0);">
|
||||||
|
</image>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
<swiper-item>
|
<swiper-item>
|
||||||
<scroll-view scroll-y :style="{height:`${viewportHeight-88-this.statusBarHeight-100}rpx`}">
|
<scroll-view scroll-y :style="{height:`${viewportHeight-100-this.statusBarHeight-100}rpx`}">
|
||||||
<view class="swiper-items2">
|
<view class="swiper-items2">
|
||||||
<view class="swiper-item2" :class="{item2Left:index%2 == 0}"
|
<view class="swiper-item2" :class="{item2Left:index%2 == 0}"
|
||||||
v-for="(item,index) in imagObj[cardListIndex]" :key="index">
|
v-for="(item,index) in imagObj[cardListIndex]" :key="index" @click="toimg(item)">
|
||||||
<image class="swiper-item2-img" mode="aspectFill" :src="item.url"></image>
|
<image class="swiper-item2-img" mode="aspectFill" :src="item.url"></image>
|
||||||
<view class="swiper-item2-title">
|
<view class="swiper-item2-title">
|
||||||
<text class="swiper-item2-title-text">{{ item.name }}</text>
|
<text class="swiper-item2-title-text">{{ item.name }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</swiper-item>
|
</swiper-item>
|
||||||
</swiper>
|
</swiper>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -68,6 +75,23 @@
|
||||||
title: "主图",
|
title: "主图",
|
||||||
id: 1
|
id: 1
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: "作品",
|
||||||
|
id: 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "其他",
|
||||||
|
id: 4
|
||||||
|
}
|
||||||
|
],
|
||||||
|
2: [{
|
||||||
|
title: "全部",
|
||||||
|
id: 0
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "主图",
|
||||||
|
id: 1
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: "环境",
|
title: "环境",
|
||||||
id: 2
|
id: 2
|
||||||
|
|
@ -94,7 +118,7 @@
|
||||||
inactiveStyle: {
|
inactiveStyle: {
|
||||||
fontWeight: 500,
|
fontWeight: 500,
|
||||||
fontSize: "32rpx",
|
fontSize: "32rpx",
|
||||||
color: "#666666",
|
color: "#333333",
|
||||||
},
|
},
|
||||||
current: 1,
|
current: 1,
|
||||||
statusBarHeight: 0,
|
statusBarHeight: 0,
|
||||||
|
|
@ -108,6 +132,7 @@
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
async onLoad(options) {
|
async onLoad(options) {
|
||||||
|
|
||||||
// 获取状态栏高度
|
// 获取状态栏高度
|
||||||
const systemInfo = await uni.getSystemInfoSync()
|
const systemInfo = await uni.getSystemInfoSync()
|
||||||
this.systemInfo = systemInfo
|
this.systemInfo = systemInfo
|
||||||
|
|
@ -120,6 +145,12 @@
|
||||||
this.getVideoList()
|
this.getVideoList()
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
onShow() {
|
||||||
|
// // #ifdef APP-PLUS
|
||||||
|
// plus.screen.unlockOrientation(); //解除屏幕方向的锁定，但是不一定是竖屏；
|
||||||
|
// plus.screen.lockOrientation('portrait'); //锁死屏幕方向为竖屏
|
||||||
|
// // #endif
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
// 计算swiper的样式
|
// 计算swiper的样式
|
||||||
swiperStyle() {
|
swiperStyle() {
|
||||||
|
|
@ -129,7 +160,7 @@
|
||||||
|
|
||||||
let viewportHeight = this.pxToRpx(this.systemInfo.windowHeight || window?.innerHeight || document
|
let viewportHeight = this.pxToRpx(this.systemInfo.windowHeight || window?.innerHeight || document
|
||||||
?.documentElement?.clientHeight || 0, screenWidth);
|
?.documentElement?.clientHeight || 0, screenWidth);
|
||||||
let height = viewportHeight - 88 - this.statusBarHeight;
|
let height = viewportHeight - 100 - this.statusBarHeight;
|
||||||
return {
|
return {
|
||||||
height: `${height}rpx`
|
height: `${height}rpx`
|
||||||
};
|
};
|
||||||
|
|
@ -141,14 +172,25 @@
|
||||||
swiperStyle2() {
|
swiperStyle2() {
|
||||||
if (this.current == 1) {
|
if (this.current == 1) {
|
||||||
return {
|
return {
|
||||||
marginTop: `${88 + this.statusBarHeight + 100}rpx`,
|
height: `${this.viewportHeight-100-this.statusBarHeight-100}rpx`
|
||||||
height: `${this.viewportHeight-88-this.statusBarHeight-100}rpx`
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
return {
|
return {
|
||||||
height: `${this.viewportHeight}rpx`
|
height: `${this.viewportHeight}rpx`
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
swiperStyle3() {
|
||||||
|
if (this.current == 1) {
|
||||||
|
return {
|
||||||
|
width: `750rpx`,
|
||||||
|
height: `${200 + this.statusBarHeight}rpx`,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
width: `750rpx`,
|
||||||
|
height: `${100 + this.statusBarHeight}rpx`,
|
||||||
|
};
|
||||||
|
},
|
||||||
viewportHeight() {
|
viewportHeight() {
|
||||||
let screenWidth = this.systemInfo.screenWidth;
|
let screenWidth = this.systemInfo.screenWidth;
|
||||||
// 注意：100vh 是视口高度，需要先转数值计算，再拼接单位
|
// 注意：100vh 是视口高度，需要先转数值计算，再拼接单位
|
||||||
|
|
@ -158,25 +200,30 @@
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
goBack() {
|
||||||
|
uni.navigateBack(-1)
|
||||||
|
},
|
||||||
|
toimg(item) {
|
||||||
|
console.log(item, 'item');
|
||||||
|
uni.previewImage({
|
||||||
|
urls: [item.url], // 外面加 [] 变成数组
|
||||||
|
current: 0 // 可选，默认第一张
|
||||||
|
})
|
||||||
|
},
|
||||||
|
tovideo(item) {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/album/components/videoplayer?url=' + item.url
|
||||||
|
})
|
||||||
|
},
|
||||||
clickTab(item) {
|
clickTab(item) {
|
||||||
this.cardListIndex = item.id
|
this.cardListIndex = item.id
|
||||||
},
|
},
|
||||||
tabsClick(e) {
|
tabsClick(e) {
|
||||||
this.$nextTick(() => {
|
console.log('12312312312');
|
||||||
|
|
||||||
this.current = e.index
|
this.current = e.index
|
||||||
if(this.current==1){
|
|
||||||
this.activeStyle.color = "#333333"
|
this.activeStyle.color = "#333333"
|
||||||
this.inactiveStyle.color = "#666666"
|
this.inactiveStyle.color = "#666666"
|
||||||
this.$refs.ideoSlideRrf.nowStopVideo()
|
|
||||||
}
|
|
||||||
if(this.current==0){
|
|
||||||
this.activeStyle.color = "#fff"
|
|
||||||
this.inactiveStyle.color = "#ccc"
|
|
||||||
this.$refs.ideoSlideRrf.nowPlayVideo()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
},
|
},
|
||||||
swiperChange(e) {
|
swiperChange(e) {
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
|
|
@ -184,12 +231,10 @@
|
||||||
if (this.current == 1) {
|
if (this.current == 1) {
|
||||||
this.activeStyle.color = "#333333"
|
this.activeStyle.color = "#333333"
|
||||||
this.inactiveStyle.color = "#666666"
|
this.inactiveStyle.color = "#666666"
|
||||||
this.$refs.ideoSlideRrf.nowStopVideo()
|
|
||||||
}
|
}
|
||||||
if (this.current == 0) {
|
if (this.current == 0) {
|
||||||
this.activeStyle.color = "#fff"
|
this.activeStyle.color = "#333333"
|
||||||
this.inactiveStyle.color = "#ccc"
|
this.inactiveStyle.color = "#666666"
|
||||||
this.$refs.ideoSlideRrf.nowPlayVideo()
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
@ -208,12 +253,17 @@
|
||||||
type: 1
|
type: 1
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
|
if (res.data.list.length != 0) {
|
||||||
this.imagObj = res.data.list[1]
|
this.imagObj = res.data.list[1]
|
||||||
let all = []
|
let all = []
|
||||||
for (let key in res.data.list[1]) {
|
for (let key in res.data.list[1]) {
|
||||||
all = [...all, ...res.data.list[1][key]]
|
all = [...all, ...res.data.list[1][key]]
|
||||||
}
|
}
|
||||||
this.imagObj[0] = all
|
this.imagObj[0] = all
|
||||||
|
} else {
|
||||||
|
this.imagObj[0] = []
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
@ -224,8 +274,17 @@
|
||||||
type: 2
|
type: 2
|
||||||
}).then(res => {
|
}).then(res => {
|
||||||
if (res.code == 200) {
|
if (res.code == 200) {
|
||||||
|
if (res.data.list.length != 0) {
|
||||||
|
console.log(res.data, 'res.data');
|
||||||
for (let key in res.data.list[2]) {
|
for (let key in res.data.list[2]) {
|
||||||
this.videoList = [...this.videoList, ...res.data.list[2][key]]
|
this.videoList = [...this.videoList, ...res.data.list[2][key]]
|
||||||
|
this.videoList.forEach((item) => {
|
||||||
|
item.img = item.url +
|
||||||
|
'?x-oss-process=video/snapshot,t_1000,m_fast,f_jpg,w_600,ar_auto'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.videoList = []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
@ -266,8 +325,10 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.videoTop {
|
.videoTop {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
|
|
||||||
::v-deep .uv-tabs__wrapper__nav__line {
|
::v-deep .uv-tabs__wrapper__nav__line {
|
||||||
background: #fff !important;
|
background: #fff !important;
|
||||||
}
|
}
|
||||||
|
|
@ -306,6 +367,7 @@
|
||||||
|
|
||||||
.container-content {
|
.container-content {
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
|
|
||||||
.swiper {
|
.swiper {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
|
||||||
|
|
@ -349,6 +411,47 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.swiper-items3 {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-direction: row;
|
||||||
|
display: flex;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
|
||||||
|
.swiper-item3 {
|
||||||
|
width: 370rpx;
|
||||||
|
height: 370rpx;
|
||||||
|
margin-top: 10rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
|
||||||
|
.swiper-item3-video {
|
||||||
|
width: 370rpx;
|
||||||
|
height: 370rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-item3-title {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 33rpx;
|
||||||
|
padding: 0 8rpx;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 0rpx 0rpx 10rpx 0rpx;
|
||||||
|
width: fit-content;
|
||||||
|
|
||||||
|
.swiper-item3-title-text {
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18rpx;
|
||||||
|
color: #FFFFFF;
|
||||||
|
line-height: 33rpx;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.item2Left {
|
.item2Left {
|
||||||
margin-right: 9rpx;
|
margin-right: 9rpx;
|
||||||
}
|
}
|
||||||
|
|
@ -398,6 +501,4 @@
|
||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue