视频优化卡顿

pages/video/index.nvue

@@ -8,10 +8,11 @@
 			<block v-for="content in videoInfo.updated_episode_num">
 				<swiper-item :key="content">
 					<view :style="'width: '+ windowWidth +'px; height:'+heightxw+'vh;'">
-						<video autoplay :key="content" id="myVideo" :controls="controls" :loop="!isplay"
-							:enable-progress-gesture="false" :show-center-play-btn="false" :show-loading="false"
-							:show-fullscreen-btn="false" @ended="ended" @controlstoggle="controlstoggle"
-							@click="tapVides()" :style="'width: '+ windowWidth +'px; height:'+heightxw+'vh;'"
+						<!-- @controlstoggle="controlstoggle" -->
+						<video v-if="isShowVideo(content)" autoplay :key="content" id="myVideo" :controls="controls"
+							:loop="!isplay" preload="auto" :enable-progress-gesture="true" :show-center-play-btn="false"
+							:show-loading="false" :show-fullscreen-btn="false" @ended="ended" @click="tapVides()"
+							:style="'width: '+ windowWidth +'px; height:'+heightxw+'vh;'"
 							:src="currentVideoInfo.video_url" class="tsvideo">
 						</video>
 						<view v-if="isqp" class="userInfo">
@@ -62,23 +63,24 @@
 				</swiper-item>
 			</block>
 		</swiper>
-		<uni-popup type="bottom" ref="select" style="z-index: 100;" :mask-click="fenji==1">
+		<uni-popup type="bottom" ref="select" style="z-index: 100;" :mask-click="true">
 			<view v-if="fenji==1" class="pop-my">
 				<view class="ju-top">
 					<view style="display: flex; flex-direction: column; ">
 						<view style="display: flex; flex-direction: column;">
 							<view style="display: flex; flex-direction: column;">
-								<u-tabs v-if="fenji==1" :activeStyle="activeStyle" lineColor="none"
-									:inactiveStyle="inactiveStyle" style="align-items: center; width: 100%;"
-									:list="list1" :current="current" @click="click"></u-tabs>
+								<view class="utabs-top">
+									<u-tabs v-if="fenji==1" :activeStyle="activeStyle" lineColor="none"
+										:inactiveStyle="inactiveStyle" class="utabs-top" :list="list1"
+										:current="current" @click="click"></u-tabs>
+								</view>
 								<view class="ju-top-title">
 									{{videoInfo.name}}
 								</view>
 								<view class="ju-top-update"> 已更新至{{videoInfo.updated_episode_num}}集 </view>
 							</view>
 							<u-tabs v-if="fenji==1" :activeStyle="activeStyle" lineColor="none"
-								:inactiveStyle="inactiveStyle" style="align-items: flex-start; width: 100%;"
-								:list="labelList" @click="click"></u-tabs>
+								:inactiveStyle="inactiveStyle" :list="labelList" @click="click"></u-tabs>
 							{{labelList}}
 						</view>
 						<view class="down" @click="down">
@@ -140,7 +142,6 @@
 		storeshelf
 	} from '@/common/apis/zju.js'
 	import configs from "@/common/config.js"
-	let audo = uni.createInnerAudioContext('myVideo')
 	export default {
 		data() {
 			return {
@@ -181,6 +182,7 @@
 					strShareSummary: "分享总结",
 					strShareImageUrl: ""
 				},
+				isShow: true,
 				fenji: 0,
 				controls: true,
 				windowWidth: 0,
@@ -198,6 +200,11 @@
 			};
 		},
 		computed: {
+			isShowVideo(item) {
+				return (item) => {
+					return this.swiperCurrent == item && this.isShow
+				}
+			},
 			isShowVip(item) {
 				return (item) => {
 					return item >= this.videoInfo.charge_sequence && item <= this.videoInfo.updated_episode_num
@@ -460,10 +467,6 @@
 					console.log('显示swiper Index:', this.displayIndex)
 				}
 			},
-			/**
-			 * 初始一个显示的swiper数据
-			 * @originIndex  从源数据的哪个开始显示默认0，如从其他页面跳转进来，要显示第n个，这个参数就是他的下标
-			 */
 			initSwiperData(originIndex) {
 				this.episode = originIndex;
 				this.isqp = false
@@ -474,17 +477,19 @@
 					if (res.code == 0) {
 						this.currentVideoInfo = res.data
 						this.activeIndex = this.episode;
+						this.isShow = true
 					} else if (res.code == 500101) {
-						this.$nextTick(() => {
-							this.$refs.select.open('bottom');
-							// this.currentVideoInfo.video_url = ""
-							this.currentVideoInfo = {}
-							this.fenji = 2
-						})
+						console.log(this.currentVideoInfo, 'res.code == 500101res.code == 500101')
+						this.currentVideoInfo.video_url = ""
+						this.isShow = false
+						this.isqp = true
+						this.videoContext.stop()
+						this.fenji = 2
+						this.$refs.select.open('bottom');
+						// this.currentVideoInfo = {}
 					} else {
-						this.$nextTick(() => {
-							this.currentVideoInfo.video_url = ""
-						})
+						this.currentVideoInfo.video_url = ""
+						this.isShow = false
 					}
 
 					console.log(res, 'getVideoEpisodePlaygetVideoEpisodePlay')
@@ -497,6 +502,8 @@
 				const {
 					current
 				} = event.detail;
+				this.swiperCurrent = current
+				console.log(this.swiperCurrent, 'this.swiperCurrentthis.swiperCurrent')
 				this.initSwiperData(current + 1)
 			},
 			controlstoggle(e) {
@@ -507,7 +514,7 @@
 </script>
 
 <style lang="scss" scoped>
-	page {
+	.content {
 		background: #000000;
 	}
 
@@ -718,4 +725,8 @@
 			}
 		}
 	}
+
+	.utabs-top /deep/ .u-tabs {
+		align-items: flex-start;
+	}
 </style>