591 lines
15 KiB
Vue
591 lines
15 KiB
Vue
<template>
|
||
<view class="video-swiper-container">
|
||
<swiper
|
||
class="video-swiper"
|
||
:style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px; background-color: #000000;'"
|
||
:vertical="true"
|
||
:current="currentIndex"
|
||
:indicator-dots="false"
|
||
@change="onSwiperChange"
|
||
>
|
||
<swiper-item v-for="(video, index) in innerVideoList" :key="video.id">
|
||
<view class="video-item">
|
||
<video
|
||
:id="`video-${index}`"
|
||
:src="video.video"
|
||
:autoplay="index === currentIndex"
|
||
:muted="false"
|
||
:controls="false"
|
||
objectFit="contain"
|
||
:loop="true"
|
||
:style="{ width: windowWidth + 'px', height: windowHeight + 'px' }"
|
||
@play="handleVideoPlay(index)"
|
||
@pause="handleVideoPause(index)"
|
||
@loadeddata="handleVideoLoaded(index)"
|
||
></video>
|
||
|
||
<!-- 点击暂停/播放 -->
|
||
<view class="video-cover" @click="togglePlay(index)" v-if=" !playingMap[index]">
|
||
<image class="play-icon" src="../static/images/play.png" mode="aspectFit"></image>
|
||
</view>
|
||
|
||
<view class="loading-indicator" v-if="isLoading">
|
||
<text class="loading-text">加载中...</text>
|
||
</view>
|
||
|
||
<view class="video-controls" @click="togglePlay(index)"></view>
|
||
<!-- 视频上展示内容-->
|
||
<video-content :list="video"></video-content>
|
||
<!-- 审核信息-->
|
||
<view v-if="video.auditStatus !== 1">
|
||
<review-status :auditStatus="video.auditStatus" :refusal="video.refusal"></review-status>
|
||
</view>
|
||
<!-- 右侧操作按钮-->
|
||
<operation-btn :list="video" :noteId="noteId"></operation-btn>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {noteDetailApi, noteRecommendApi} from "../../../api/discover";
|
||
import reviewStatus from "./reviewStatus";
|
||
import operationBtn from "./operationBtn";
|
||
import videoContent from "./videoContent";
|
||
export default {
|
||
name: 'swiperVideo',
|
||
props: {
|
||
noteId: {
|
||
type: [String, Number],
|
||
default: ''
|
||
},
|
||
fromTo: {
|
||
type: String,
|
||
default: ''
|
||
}
|
||
},
|
||
components: {
|
||
reviewStatus,
|
||
operationBtn,
|
||
videoContent
|
||
},
|
||
computed: {
|
||
windowHeight() {
|
||
return this.getHeight.windowHeight - this.getHeight.barTop
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
getHeight: this.$util.getWXStatusHeight(),
|
||
innerVideoList: [],
|
||
currentIndex: 0,
|
||
windowWidth: 0,
|
||
isLoading: false,
|
||
videoContexts: {},
|
||
touchStartTime: 0,
|
||
touchEndTime: 0,
|
||
playingMap: {},
|
||
// 分页相关
|
||
where: {
|
||
page: 1,
|
||
limit: 5,
|
||
noteId: ''
|
||
},
|
||
loadend: false,
|
||
loading: false,
|
||
// 播放控制相关
|
||
isPlaying: false,
|
||
playTimer: null,
|
||
pauseTimer: null,
|
||
// 用户手动暂停状态记录
|
||
userPausedMap: {},
|
||
// 手机浏览器自动播放相关
|
||
hasUserInteracted: false,
|
||
canAutoplay: false,
|
||
autoplayAttempted: false
|
||
}
|
||
},
|
||
watch: {
|
||
noteId: {
|
||
immediate: true,
|
||
handler(newNoteId) {
|
||
if (newNoteId) {
|
||
this.windowWidth = uni.getSystemInfoSync().windowWidth
|
||
this.where.noteId = newNoteId;
|
||
this.loadVideoData();
|
||
}
|
||
}
|
||
}
|
||
},
|
||
onLoad() {
|
||
// 初始化窗口尺寸
|
||
this.windowWidth = uni.getSystemInfoSync().windowWidth;
|
||
// 初始化时设置canAutoplay为true，允许默认播放
|
||
this.canAutoplay = true;
|
||
|
||
// 如果有noteId，加载视频数据
|
||
if (this.noteId) {
|
||
this.where.noteId = this.noteId;
|
||
this.loadVideoData();
|
||
}
|
||
},
|
||
|
||
// 组件挂载后尝试自动播放第一个视频
|
||
mounted() {
|
||
this.$nextTick(() => {
|
||
if (this.innerVideoList.length > 0 && this.currentIndex === 0) {
|
||
this.playVideo(0);
|
||
}
|
||
});
|
||
},
|
||
onShow() {
|
||
},
|
||
methods: {
|
||
// 加载视频数据
|
||
async loadVideoData() {
|
||
try {
|
||
// this.isLoading = true;
|
||
|
||
// 先获取单个视频详情
|
||
await this.getNoteDetail();
|
||
|
||
// 然后获取推荐视频列表
|
||
await this.getRecommendVideos();
|
||
|
||
} catch (error) {
|
||
this.isLoading = false;
|
||
} finally {
|
||
this.isLoading = false;
|
||
}
|
||
},
|
||
|
||
// 获取单个视频详情
|
||
async getNoteDetail() {
|
||
if (!this.noteId) return;
|
||
|
||
try {
|
||
this.isLoading = true;
|
||
const res = await noteDetailApi(this.noteId);
|
||
const videoData = res.data;
|
||
|
||
// 处理视频数据格式
|
||
const processedVideo = this.processVideoData(videoData);
|
||
|
||
// 如果是第一个视频，直接添加到列表开头
|
||
if (this.innerVideoList.length === 0) {
|
||
this.innerVideoList.push(processedVideo);
|
||
this.$nextTick(() => {
|
||
this.initVideoContexts();
|
||
this.playVideo(0);
|
||
});
|
||
} else {
|
||
// 检查是否已存在，避免重复
|
||
const exists = this.innerVideoList.some(video => video.id === processedVideo.id);
|
||
if (!exists) {
|
||
this.innerVideoList.unshift(processedVideo);
|
||
this.$nextTick(() => {
|
||
this.initVideoContexts();
|
||
});
|
||
}
|
||
}
|
||
this.isLoading = false;
|
||
} catch (error) {
|
||
this.isLoading = false;
|
||
console.error('获取视频详情失败:', error);
|
||
}
|
||
},
|
||
|
||
// 获取推荐视频列表
|
||
async getRecommendVideos() {
|
||
if (this.loadend) return;
|
||
|
||
try {
|
||
this.loading = true;
|
||
const res = await noteRecommendApi(this.where);
|
||
|
||
const list = res.data.list || [];
|
||
|
||
// 避免重复添加相同的视频数据
|
||
const filteredList = list.filter(video =>
|
||
!this.innerVideoList.some(existingVideo => existingVideo.id === video.id)
|
||
);
|
||
|
||
if (filteredList.length > 0) {
|
||
// 处理视频数据格式
|
||
const processedList = filteredList.map(video => this.processVideoData(video));
|
||
|
||
// 添加到视频列表
|
||
this.innerVideoList.push(...processedList);
|
||
|
||
// 更新分页信息
|
||
this.where.page = this.where.page + 1;
|
||
this.loadend = this.where.page > res.data.totalPage;
|
||
|
||
this.$nextTick(() => {
|
||
this.initVideoContexts();
|
||
});
|
||
}
|
||
this.isLoading = false;
|
||
} catch (error) {
|
||
console.error('获取推荐视频失败:', error);
|
||
} finally {
|
||
this.loading = false;
|
||
}
|
||
},
|
||
|
||
// 清理视频URL,针对小程序端报错信息
|
||
cleanVideoUrl(url) {
|
||
if (!url) return '';
|
||
|
||
// 移除开发工具添加的参数
|
||
if (url.includes('#devtools_no_referrer')) {
|
||
url = url.split('#devtools_no_referrer')[0];
|
||
}
|
||
|
||
// 移除其他可能的开发工具参数
|
||
if (url.includes('#devtools')) {
|
||
url = url.split('#devtools')[0];
|
||
}
|
||
|
||
// 确保URL格式正确
|
||
if (url.startsWith('//')) {
|
||
url = 'https:' + url;
|
||
}
|
||
|
||
return url;
|
||
},
|
||
|
||
// 处理视频数据格式
|
||
processVideoData(video) {
|
||
// 清理视频URL
|
||
const videoUrl = this.cleanVideoUrl(video.video);
|
||
|
||
return {
|
||
...video,
|
||
video: videoUrl,
|
||
platReplySwitch: video.platReplySwitch !== false,
|
||
// 播放状态
|
||
playIng: false,
|
||
state: 'pause',
|
||
isplay: false,
|
||
loading: false
|
||
};
|
||
},
|
||
|
||
initVideoContexts() {
|
||
// 确保 videoContexts 和 playingMap 被正确初始化
|
||
if (!this.videoContexts) {
|
||
this.videoContexts = {};
|
||
}
|
||
if (!this.playingMap) {
|
||
this.playingMap = {};
|
||
}
|
||
if (!this.userPausedMap) {
|
||
this.userPausedMap = {};
|
||
}
|
||
|
||
this.innerVideoList.forEach((_, index) => {
|
||
try {
|
||
this.videoContexts[index] = uni.createVideoContext(`video-${index}`, this);
|
||
} catch (error) {
|
||
}
|
||
});
|
||
},
|
||
|
||
// 处理视频播放事件
|
||
handleVideoPlay(index) {
|
||
if (this.playingMap && typeof this.playingMap === 'object') {
|
||
this.$set(this.playingMap, index, true);
|
||
this.videoPlaying(index);
|
||
}
|
||
},
|
||
|
||
// 处理视频暂停事件
|
||
handleVideoPause(index) {
|
||
if (this.playingMap && typeof this.playingMap === 'object') {
|
||
this.$set(this.playingMap, index, false);
|
||
this.videoPaused(index);
|
||
}
|
||
},
|
||
|
||
// 处理视频加载完成事件
|
||
handleVideoLoaded(index) {
|
||
if (index === this.currentIndex) {
|
||
this.playVideo(index);
|
||
}
|
||
},
|
||
|
||
// 轮播切换时的处理
|
||
onSwiperChange(e) {
|
||
const newIndex = e.detail.current;
|
||
|
||
// 确保 playingMap 和 userPausedMap 已初始化
|
||
if (!this.playingMap) {
|
||
this.playingMap = {};
|
||
}
|
||
if (!this.userPausedMap) {
|
||
this.userPausedMap = {};
|
||
}
|
||
|
||
// 暂停之前的视频
|
||
if (this.currentIndex !== newIndex) {
|
||
// 暂停旧视频
|
||
if (this.videoContexts && this.videoContexts[this.currentIndex]) {
|
||
try {
|
||
this.videoContexts[this.currentIndex].pause();
|
||
if (this.playingMap) {
|
||
this.playingMap[this.currentIndex] = false;
|
||
}
|
||
this.videoPaused(this.currentIndex);
|
||
} catch (error) {
|
||
console.log('暂停旧视频失败:', error);
|
||
}
|
||
}
|
||
|
||
// 更新当前索引
|
||
this.currentIndex = newIndex;
|
||
|
||
// 重置用户暂停状态，确保新视频能自动播放
|
||
if (this.userPausedMap) {
|
||
this.userPausedMap[newIndex] = false;
|
||
}
|
||
|
||
// 标记用户已交互，提高自动播放成功率
|
||
this.hasUserInteracted = true;
|
||
|
||
// 播放新视频
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
this.playVideo(newIndex);
|
||
}, 100); // 小延迟确保DOM已更新
|
||
});
|
||
}
|
||
},
|
||
|
||
// 播放视频
|
||
playVideo(index) {
|
||
// 确保 videoContexts 和 playingMap 已初始化
|
||
if (!this.videoContexts || !this.videoContexts[index] || !this.playingMap) {
|
||
console.log('播放视频失败：视频上下文或播放状态映射未初始化');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
this.videoContexts[index].play();
|
||
this.$set(this.playingMap, index, true);
|
||
this.canAutoplay = true;
|
||
} catch (error) {
|
||
// 标记需要用户交互
|
||
this.hasUserInteracted = false;
|
||
}
|
||
},
|
||
|
||
// 暂停视频
|
||
pauseVideo(index) {
|
||
// 确保 videoContexts 和 playingMap 已初始化
|
||
if (!this.videoContexts || !this.videoContexts[index] || !this.playingMap) {
|
||
console.log('暂停视频失败：视频上下文或播放状态映射未初始化');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
this.videoContexts[index].pause();
|
||
this.$set(this.playingMap, index, false);
|
||
} catch (error) {
|
||
}
|
||
},
|
||
|
||
// 视频开始播放时更新状态
|
||
videoPlaying(index) {
|
||
// 确保 playingMap 已初始化
|
||
if (!this.playingMap || typeof this.playingMap !== 'object') {
|
||
this.playingMap = {};
|
||
}
|
||
this.$set(this.playingMap, index, true);
|
||
if (this.innerVideoList && this.innerVideoList[index]) {
|
||
this.innerVideoList[index].playIng = true;
|
||
this.innerVideoList[index].state = 'playing';
|
||
this.innerVideoList[index].isplay = true;
|
||
}
|
||
},
|
||
|
||
// 视频暂停时更新状态
|
||
videoPaused(index) {
|
||
// 确保 playingMap 已初始化
|
||
if (!this.playingMap || typeof this.playingMap !== 'object') {
|
||
this.playingMap = {};
|
||
}
|
||
this.$set(this.playingMap, index, false);
|
||
if (this.innerVideoList && this.innerVideoList[index]) {
|
||
this.innerVideoList[index].playIng = false;
|
||
this.innerVideoList[index].state = 'pause';
|
||
this.innerVideoList[index].isplay = false;
|
||
}
|
||
},
|
||
|
||
// 切换播放状态
|
||
togglePlay(index) {
|
||
// 确保 playingMap 和 userPausedMap 已初始化
|
||
if (!this.playingMap || typeof this.playingMap !== 'object') {
|
||
this.playingMap = {};
|
||
}
|
||
if (!this.userPausedMap || typeof this.userPausedMap !== 'object') {
|
||
this.userPausedMap = {};
|
||
}
|
||
|
||
// 标记用户已交互
|
||
this.hasUserInteracted = true;
|
||
|
||
if (this.playingMap[index]) {
|
||
// 暂停视频
|
||
this.pauseVideo(index);
|
||
this.userPausedMap[index] = true;
|
||
} else {
|
||
// 播放视频
|
||
this.playVideo(index);
|
||
this.userPausedMap[index] = false;
|
||
// 确保视频元素已准备好
|
||
setTimeout(() => {
|
||
if (this.playingMap && this.videoContexts && !this.playingMap[index] && this.videoContexts[index]) {
|
||
try {
|
||
this.videoContexts[index].play();
|
||
} catch (error) {
|
||
console.log('二次尝试播放失败:', error);
|
||
}
|
||
}
|
||
}, 100);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.video-swiper-container {
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: #000;
|
||
}
|
||
.video-swiper {
|
||
/*width: 100%;*/
|
||
/*height: 100%;*/
|
||
}
|
||
.video-item {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.video-cover {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 10;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
.pause-cover {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
background-color: rgba(0, 0, 0, 0.3);
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 10;
|
||
}
|
||
|
||
.pause-icon {
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0% {
|
||
opacity: 0.8;
|
||
transform: translate(-50%, -50%) scale(1);
|
||
}
|
||
50% {
|
||
opacity: 0.5;
|
||
transform: translate(-50%, -50%) scale(1.1);
|
||
}
|
||
100% {
|
||
opacity: 0.8;
|
||
transform: translate(-50%, -50%) scale(1);
|
||
}
|
||
}
|
||
.play-icon {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
opacity: 0.8;
|
||
}
|
||
.play-hint {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
background-color: rgba(0, 0, 0, 0.7);
|
||
padding: 20rpx 40rpx;
|
||
border-radius: 40rpx;
|
||
}
|
||
.hint-text {
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
}
|
||
.loading-indicator {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
padding: 20rpx 40rpx;
|
||
border-radius: 40rpx;
|
||
z-index: 20;
|
||
}
|
||
.loading-text {
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
}
|
||
.video-controls {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
/*z-index: 20;*/
|
||
}
|
||
.video-info {
|
||
position: absolute;
|
||
bottom: 180rpx;
|
||
left: 40rpx;
|
||
right: 140rpx;
|
||
color: #fff;
|
||
z-index: 30;
|
||
}
|
||
.video-title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
display: block;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
.video-description {
|
||
font-size: 28rpx;
|
||
line-height: 40rpx;
|
||
opacity: 0.9;
|
||
display: -webkit-box;
|
||
-webkit-box-orient: vertical;
|
||
-webkit-line-clamp: 2;
|
||
overflow: hidden;
|
||
}
|
||
</style>
|
||
|
||
|