From 1076d3e64cfb8648e429b3d7a3399e4593affc0c Mon Sep 17 00:00:00 2001
From: xiangpei <xiangpei@timesnew.cn>
Date: 星期一, 26 五月 2025 18:11:03 +0800
Subject: [PATCH] 发布视频时获取视频时长、视频暂停功能
---
pages/tabbar/index/home.vue | 45 +++++++++++++++++++++++++++++++++------------
1 files changed, 33 insertions(+), 12 deletions(-)
diff --git a/pages/tabbar/index/home.vue b/pages/tabbar/index/home.vue
index 418f1c7..0fb56be 100644
--- a/pages/tabbar/index/home.vue
+++ b/pages/tabbar/index/home.vue
@@ -9,8 +9,17 @@
@change="onSwiperChange"
>
<swiper-item v-for="(item, index) in videoList" :key="item.id">
+ <!-- 鎾斁鎸夐挳锛堜粎褰撹棰戞殏鍋滄椂鏄剧ず锛� -->
+ <view
+ class="play-icon"
+ @click="togglePlay(index)"
+ v-if="!currentVideoIsPlaying"
+ >
+ <image src="/static/video/play.png" style="width: 45px;height: 45px" mode="aspectFit"></image>
+ </view>
<video
:id="'video'+index"
+ :ref="'video'+index"
:src="item.videoUrl"
:autoplay="currentIndex === index"
:controls="false"
@@ -20,6 +29,7 @@
@play="onPlay(index)"
@pause="onPause(index)"
@ended="onEnded(index)"
+ @click="togglePlay(index)"
></video>
<!-- 鎮寕鍟嗗搧閾炬帴灞� -->
@@ -90,6 +100,7 @@
export default {
data() {
return {
+ currentVideoIsPlaying: false, // 褰撳墠瑙嗛鏄惁姝ｅ湪鎾斁
isFullScreen: false,
windowHeight: 0,
currentIndex: 0, // 褰撳墠鎾斁鐨勮棰戠储寮�
@@ -106,10 +117,7 @@
this.loadVideos();
},
onLoad() {
- if(!this.videoList || this.videoList.length < 1) {
- this.loadVideos();
- }
-
+ this.loadVideos();
},
onReady() {
// 鍒濆鍖栬棰戜笂涓嬫枃
@@ -183,24 +191,27 @@
}
})
},
-
+ // 鍗曞嚮灞忓箷锛氭殏鍋滄垨缁х画鎾斁
+ togglePlay(index) {
+ if(this.currentVideoIsPlaying) {
+ this.videoContexts[index].pause();
+ } else {
+ this.videoContexts[index].play();
+ }
+ },
// 瑙嗛鎾斁浜嬩欢
onPlay(index) {
- console.log(`瑙嗛 ${index} 寮�濮嬫挱鏀綻);
+ this.currentVideoIsPlaying = true;
},
// 瑙嗛鏆傚仠浜嬩欢
onPause(index) {
- console.log(`瑙嗛 ${index} 鏆傚仠`);
+ this.currentVideoIsPlaying = false;
},
// 瑙嗛缁撴潫浜嬩欢
onEnded(index) {
- console.log(`瑙嗛 ${index} 鎾斁缁撴潫`);
- // // 鑷姩鎾斁涓嬩竴涓紙濡傛灉涓嶅湪鏈�鍚庝竴涓級
- // if (index < this.videoList.length - 1) {
- // this.currentIndex = index + 1;
- // }
+ this.currentVideoIsPlaying = false;
}
}
}
@@ -226,6 +237,16 @@
height: 100%;
object-fit: cover;
}
+ .play-icon {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 45px;
+ height: 45px;
+ z-index: 10;
+ opacity: 0.6;
+ }
.video-info {
width: 70%;
--
Gitblit v1.8.0