From 46130f6c87cb1373ef44ad5e0a68b9842d0b3fe6 Mon Sep 17 00:00:00 2001
From: linju <linju@dcloud.io>
Date: Mon, 28 Aug 2023 20:45:43 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20=E9=83=A8=E5=88=86?=
 =?UTF-8?q?=E6=83=85=E5=86=B5=E4=B8=8B=E7=AB=96=E5=88=92=E8=A7=86=E9=A2=91?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=9A=E5=AD=98=E5=9C=A8=E5=A4=9A=E4=B8=AA=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E4=B8=80=E8=B5=B7=E6=92=AD=E6=94=BE=E7=9A=84=E6=83=85?=
 =?UTF-8?q?=E5=86=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../swiper-vertical-video.uvue                | 40 +++++++++++++------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/pages/template/swiper-vertical-video/swiper-vertical-video.uvue b/pages/template/swiper-vertical-video/swiper-vertical-video.uvue
index f817b259..cbbce38e 100644
--- a/pages/template/swiper-vertical-video/swiper-vertical-video.uvue
+++ b/pages/template/swiper-vertical-video/swiper-vertical-video.uvue
@@ -7,7 +7,7 @@
 			<swiper-item class="swiper-item" v-for="(item,i) in visibleList" :key="i">
 				<video ref="video" class="video-box" objectFit="cover" :id="item._id" @loadstart="onLoadstart(i)" :src="item.src" :poster="item.poster_src" :show-center-play-btn="false" :autoplay="false" :controls="false" :loop="true" @play="onPlay(i)" @pause="onPause(i)"></video>
 				<view class="video-cover" @click="changeState(i)">
-					<image v-if="state[i] === 'onPause'" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image>
+					<image v-if="state[i] === 'pause'" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image>
 				</view>
 				<view class="video-info" v-if="0">
 					<text class="video-info-text">容器：第 {{i}} 个</text>
@@ -24,7 +24,8 @@
 <script>
 	import { VideoNode } from "uts.sdk.modules.DCloudUniVideo";
 	type ListItem = { _id : string, content : string, src : string, poster_src : string }
-	let page : number = 0;
+	let page : number = 0,
+  currentPageIsShow : boolean = true;
 
 	export default {
 		components: {},
@@ -72,7 +73,7 @@
 				this.state.forEach((val : string, index : number) => {
 					if (index === current) {
 						this.doPlay(current)
-					} else if (val === 'onPlay') {
+					} else {
 						// 除了选中的其他已经播放的都需要停止
 						this.doStop(index)
 						console.log('index:' + index + '已被执行停止');
@@ -82,11 +83,22 @@
 		},
 		onReady() {
 			// 一启动完成，就播放第一个
-			this.doPlay(0)
-		},
+			this.doPlay(0)
+		},
+    onShow(){
+      currentPageIsShow = true
+    },
+    onHide() {
+      currentPageIsShow = false
+      console.log('pages-onHide');
+      this.doPause(this.current)
+    },
+    onUnload() {
+      this.doPause(this.current)
+    },
 		methods: {
 			changeState(index : number) {
-				if (this.state[index] === 'onPlay') {
+				if (this.state[index] === 'play') {
 					this.doPause(index)
 				} else {
 					this.doPlay(current)
@@ -97,7 +109,7 @@
       },
 			doPlay(index : number) {
         // console.log("doPlay  video" + index,(this.$refs["video"] as VideoNode[])[0] );
-				(this.$refs["video"] as VideoNode[])[index].play()
+				(this.$refs["video"] as VideoNode[])[index].play()
 			},
 			doStop(index : number) {
 				(this.$refs["video"] as VideoNode[])[index].stop()
@@ -113,12 +125,16 @@
       	console.log("doPause  video-" + index);
       },
 			onPause(index : number) {
-				this.state[index] = 'onPause'
+				this.state[index] = 'pause'
 				console.log('onPause', index);
 			},
-			onPlay(index : number) {
-				this.state[index] = 'onPlay'
-				console.log('onPlay', index);
+			onPlay(index : number) {
+        if(this.current != index || !currentPageIsShow){
+          this.onPause(index)
+        }else{
+          this.state[index] = 'play'
+          console.log('onPlay', index);
+        }
 			},
 			getData() : ListItem[] {
 				let videoUrlList = [
@@ -163,7 +179,7 @@
       		},
       		complete(result) {
       			console.log('navigateBack complete', result.errMsg)
-      		},
+      		}
       	})
       }
 		}
-- 
GitLab