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/video/video.vue | 32 ++++++++-------
static/video/play.png | 0
pages/tabbar/index/home.vue | 45 ++++++++++++++++------
3 files changed, 50 insertions(+), 27 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%;
diff --git a/pages/tabbar/video/video.vue b/pages/tabbar/video/video.vue
index d003daf..edab4fc 100644
--- a/pages/tabbar/video/video.vue
+++ b/pages/tabbar/video/video.vue
@@ -207,6 +207,7 @@
id: '',
title: '',
videoFileKey: '',
+ videoDuration: 0,
videoFit: 'cover',
goodsId: '',
tags: [],
@@ -260,7 +261,7 @@
},
methods: {
// 鑾峰彇鎺ㄨ崘鏍囩
- getRecommendTags(type) {
+ async getRecommendTags(type) {
const params = {
tagName: this.tagInput.trim(),
searchType: type
@@ -274,7 +275,6 @@
console.log("鎵ц浜�");
// 璋冪敤鍚庣鑾峰彇sts涓存椂璁块棶鍑瘉
getSTSToken().then(res => {
- console.log(res, "sts缁撴瀯");
const COS = require('@/lib/cos-wx-sdk-v5.js'); // 寮�鍙戞椂浣跨敤
// const COS = require('./lib/cos-wx-sdk-v5.min.js'); // 涓婄嚎鏃朵娇鐢ㄥ帇缂╁寘
@@ -308,20 +308,21 @@
if(fileName.indexOf('%') > -1) {
fileName = decodeURIComponent(fileName);
}
- const fileKey = getFileKey(fileName);
- this.videoInfo = {
- url: res.tempFilePath,
- fileKey: fileKey,
- fileType: fileKey.split('/')[0],
- fileSize: res.size,
- originalFileName: fileName,
- cover: ''
- };
- this.formData.videoFileKey = fileKey;
- // 鍒ゆ柇瑙嗛鐨勫～鍏呮ā寮�
- this.formData.videoFit = this.calculateVideoFit(res.width, res.height)
+ const fileKey = getFileKey(fileName);
+ this.videoInfo = {
+ url: res.tempFilePath,
+ fileKey: fileKey,
+ fileType: fileKey.split('/')[0],
+ fileSize: res.size,
+ originalFileName: fileName,
+ cover: ''
+ };
+ this.formData.videoFileKey = fileKey;
+ this.formData.videoDuration = res.duration;
+ // 鍒ゆ柇瑙嗛鐨勫～鍏呮ā寮�
+ this.formData.videoFit = this.calculateVideoFit(res.width, res.height)
- this.cosClient.uploadFile({
+ this.cosClient.uploadFile({
Bucket: this.bucket,
Region: this.region,
Key: fileKey,
@@ -496,6 +497,7 @@
title: '',
videoFileKey: '',
videoFit: 'cover',
+ videoDuration: 0,
goodsId: '',
tags: [],
fileInfo: {}
diff --git a/static/video/play.png b/static/video/play.png
new file mode 100644
index 0000000..c06f226
--- /dev/null
+++ b/static/video/play.png
Binary files differ
--
Gitblit v1.8.0