优化视频播放

pages/tabbar/pagehome/pagehome.vue

@@ -26,6 +26,9 @@
 							</view>
 						</view>
 					</view>
+					<view class="" v-else>
+						<pitera textStr="查询课程列表无果o(╥﹏╥)o" textColor="#b0aaa9" paddingStr="40rpx 0 20rpx 0"></pitera>
+					</view>
 					<!-- 两列列表 start -->
 					<list ref="refcourse" @goDetail="goCourseDetail"></list>
 					<!-- 两列列表 end -->
@@ -64,12 +67,14 @@
 	import swiperTab from '@/components/swiper-tab/swiper-tab.vue';
 	import footTab from '@/components/foot-tabs/foot-tab.vue';
 	import list from '@/components/list.vue';
+	import pitera from '@/components/nothing/pitera.vue';
 	export default {
 		components:{
 			'foot-tab' :footTab,
 			swiperTab,
 			swiperPu,
-			list
+			list,
+			pitera
 		},
 		data() {
 			return {
@@ -174,19 +179,7 @@
 			},
 			// 播放视频
 			palyVideo(index){
-				let newList = [];
+				uni.setStorageSync('videoList',this.videoList);
-				if(this.videoList.length){
-					this.videoList.forEach(item=>{
-						let obj = {
-							...item,
-							isPlayImg:true,
-							autoplay:false,
-							isControls:false
-						}
-						newList.push(obj);
-					})
-				}
-				uni.setStorageSync('videoList',newList);
 				uni.navigateTo({
 					url:`/pagesB/play-video/play-video?current=${index}`
 				})

pages/tabbar/video/video.vue

@@ -16,7 +16,7 @@
 					<view class="radius8 bacf pad10 boxshow1 mar-s30" v-for="(item,index) in dataList" :key="index">
 						<view class="posir disjcac">
 							<image :src="item.cover" style="height: 388rpx;" mode="aspectFill" class="width100 animated fadeIn" lazy-load></image>
-							<image @tap="$toolAll.tools.goPage('/pagesB/play-video/play-video')" class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image>
+							<image @tap="palyVideo(index)" class="posia" src="/static/tabbar/icon-play.png" mode="" style="width: 70rpx;height: 70rpx;" lazy-load></image>
 						</view>
 						<view class="pad-zy10">
 							<view class="fon24 pad-sx16 clips2" style="color: #262626;">{{item.title}}</view>
@@ -88,6 +88,13 @@
 					}
 				})
 			},
+			// 播放视频
+			palyVideo(index){
+				uni.setStorageSync('videoList',this.dataList);
+				uni.navigateTo({
+					url:`/pagesB/play-video/play-video?current=${index}`
+				})
+			},
 		}
 	}
 </script>

pagesB/play-video/play-video.nvue

@@ -1,7 +1,7 @@
 <template>
 	<div style="width:100%;overflow-x:hidden;">
 		<image class="" @tap="backEv" :style="{top:statusHeight+'px'}" src="/static/public/video-back.png" style="width: 33rpx;height: 33rpx;position: fixed;z-index: 10;left: 20rpx;" mode="aspectFill"></image>
-		<swiper :current="currentIndex" vertical :style="{width:newwidth+'px',height:newHeight+'px'}">
+		<swiper @transition="getxy" @change="switchVideo" :current="currentIndex" vertical :style="{width:newwidth+'px',height:newHeight+'px'}">
 			<swiper-item @tap="doubleClick(index)" v-for="(item,index) in videoList" :key="index">
 				  <!-- :poster="item.cover" -->
 				<video :id="`video${index}`" :ref="`refvideo_${index}`" style="width: 100%;" :style="{height:newHeight+'px'}" :autoplay="item.autoplay"
@@ -9,7 +9,7 @@
 				:controls="item.isControls" :show-center-play-btn="isCenterImg" :show-play-btn="isBottomImg" :show-fullscreen-btn="isFull"
 				@play="comePlay(index)" @pause="comePause(index)"></video>
 				<!-- 封面图 -->
-				<image v-if="item.isPlayImg" @tap="playEv(index)" src="/static/tabbar/icon-play.png" style="position: fixed;top: 50%;left: 50%;
+				<image v-if="item.isPlayImg" @tap.stop="playEv(index)" src="/static/tabbar/icon-play.png" style="position: fixed;top: 50%;left: 50%;
 					width: 126rpx;height: 126rpx;transform: translate(-50%, -50%);" mode="aspectFill"></image>
 			</swiper-item>
 		</swiper>
@@ -41,36 +41,67 @@
 		},
 		onLoad(op) {
 			this.currentIndex = op.current;
-			this.videoList = uni.getStorageSync('videoList');
+			uni.getStorageSync('videoList').forEach(item=>{
+				let obj = {
+					...item,
+					isPlayImg:true,
+					autoplay:false,
+					isControls:false
+				}
+				this.videoList.push(obj);
+			})
+			this.videoList[this.currentIndex].autoplay = true;
 			this.videoContext = uni.createVideoContext(`video${this.currentIndex}`, this)
 		},
+		onHide() {
+			uni.removeStorageSync('videoList');
+		},
 		methods:{
+			// 视频滑动结束
+			getxy(e){
+				let num = e.detail.dy;
+				if(num==this.newHeight || -num==this.newHeight){
+					this.playCurrentVideo(this.currentIndex);
+				}
+			},
+			// 滑动swiper 设置当前视频索引
+			switchVideo(e){
+				this.currentIndex = e.detail.current;
+			},
 			// 双击
 			doubleClick(index){
 				this.count++;
 				setTimeout(()=>{
-					if(this.count>2 && this.videoList[index].isPlayImg == true){
-						this.playCurrentVideo(index);
 					this.count = 0;
-					} else {
+				},300)
+				if(this.count>2){
+					if(this.videoList[index].isPlayImg){
+						// 如果当前视频正在播放中，双击及暂停播放
+						this.videoContext.pause();
 						this.videoList[index].isPlayImg = true;
+					} else {
+						// 如果当前视频暂停中，双击及开始播放
+						this.videoList[index].isPlayImg = false;
+						this.videoContext.play();
+					}
 				}
-				},1000)
 			},
 			// 播放当前视频
 			playCurrentVideo(index){
 				this.videoContext.pause();
-				this.videoContext = uni.createVideoContext(`video${index}`, this)
+				this.videoContext = uni.createVideoContext(`video${index}`, this);
 				this.videoList[index].isPlayImg = false;
+				this.videoContext.play();
 			},
+			// 退出视频播放
 			backEv(){
 				uni.navigateBack({
 					delta:1
 				})
 			},
+			// 点击播放图标，播放视频
 			playEv(index){
 				this.playCurrentVideo(index);
-				this.videoContext.play();
 			},
 			// 视频播放
 			comePlay(index){//当开始/继续播放时触发play事件