代码优化

vedio/components/home/recommendVideo.vue

@@ -3,12 +3,18 @@
 		<swiper class="swiper" circular @change="swiperChange" :current="current" :vertical="true" duration="300">
 
 			<swiper-item v-for="(list, index) in displaySwiperList" :key="index">
-				<view v-if="Math.abs(displayIndex-index)==0" style="height: 100%;">
-					<video v-if="Math.abs(displayIndex-index)==0" :id="''+list.vedioId" :controls="controls"
+				<view v-if="Math.abs(displayIndex-index)==0" style="height: 100%;" @click="tapVideoHover()">
+					<!-- <video v-if="Math.abs(displayIndex-index)==0" :id="''+list.vedioId" :controls="controls"
 						:autoplay="true" :isplay="true" play-btn-position="center" :loop="!isplay" @ended="ended"
 						@controlstoggle="controlstoggle" :show-fullscreen-btn="false" :poster="list.coverImage"
 						:show-loading="true" @click="tapVideoHover()" :enable-progress-gesture="false" class="tsvideo"
-						:src="list.recommendUrl" object-fit="cover" />
+						:src="list.recommendUrl" object-fit="cover" /> -->
+
+					<tt-video-player v-if="Math.abs(displayIndex-index)==0" :id="list.vedioId"
+						:album-id="list.douyinAlbumId" :episode-id="list.douyinEpisodeId" :cloud-type="1" version="1"
+						object-fit="contain" :controls="controls" :poster="data.coverImage" :loop="!isplay"
+						:autoplay="true" :enable-progress-gesture="false" :show-loading="true" @play="startPlay"
+						:show-fullscreen-btn="false" @controlstoggle="controlstoggle" @ended="ended" />
 				</view>
 				<view v-if="!isqp" class="userInfo flex">
 					<!-- 点赞 -->
@@ -50,7 +56,8 @@
 </template>
 
 <script>
-	import common from '@/mixins/common';
+	import common from '@/mixins/common';
+	import ttVideoPlayer from '@/ttcomponents/tt-video-player'
 
 	import {
 		navigateTo,
@@ -60,7 +67,10 @@
 
 	export default {
 		name: "recommendVideo",
-		mixins: [common],
+		mixins: [common],
+		components: {
+			ttVideoPlayer
+		},
 		data() {
 			return {
 				controls: false, // 控制按钮
@@ -123,12 +133,16 @@
 					this.isFirstLoad = false
 					this.queryList()
 				} else {
-					this.videoContext?.play()
+					tt.createVideoContext('' + this.originList[originIndex].vedioIndex, this).play();
+
+					// this.videoContext?.play()
 				}
 			},
 			stop() {
 				// audo.pause()
-				this.videoContext?.pause()
+				// this.videoContext?.pause()
+				tt.createVideoContext('' + this.originList[originIndex].vedioIndex, this).pause();
+
 			},
 			queryList() {
 				// 推荐
@@ -151,6 +165,32 @@
 				this.isqp = true
 				this.controls = true
 			},
+			startPlay() {
+				if (tt.canIUse('preloadResourceVideo')) {
+					this.preloadplaylet()
+				}
+			},
+			preloadplaylet() {
+				var preIndex = 0
+				if (this.displayIndex < 2) {
+					preIndex = this.displayIndex + 1
+				} else {
+					preIndex = 0
+				}
+				// 抖音预加载
+				tt.preloadResourceVideo({
+					albumId: this.displaySwiperList[preIndex].douyinAlbumId,
+					episodeId: this.displaySwiperList[preIndex].douyinEpisodeId,
+					cloudType: 1,
+					version: 1,
+					success: () => {
+						console.log("短剧预加载成功" + this.displaySwiperList[preIndex].douyinEpisodeId);
+					},
+					fail: (error) => {
+						console.log("短剧预加载失败", error);
+					},
+				});
+			},
 			ended() {
 				// 1.播放当前视频结束时触发，自动切换下一个视频
 				if (this.isplay) {
@@ -189,13 +229,19 @@
 				}
 				console.log('++++++++++++上一条播放数据 Index:', this.oid)
 				// audo.pause()
-				this.videoContext = uni.createVideoContext("" + this.originList[this.oid].vedioId, this)
-				this.videoContext.pause()
-				this.videoContext.stop()
+				// this.videoContext = uni.createVideoContext("" + this.originList[this.oid].vedioId, this)
+				// this.videoContext.pause()
+				// this.videoContext.stop()
+				tt.createVideoContext('' + this.originList[this.oid].vedioIndex, this).pause();
+
+
 				setTimeout(() => {
 					console.log('qqqqqq:', this.originList[originIndex].vedioId)
-					this.videoContext = uni.createVideoContext("" + this.originList[originIndex].vedioId, this)
-					this.videoContext.play()
+					// this.videoContext = uni.createVideoContext("" + this.originList[originIndex].vedioId, this)
+					// this.videoContext.play()
+					tt.createVideoContext('' + this.originList[originIndex].vedioIndex, this).play();
+
+
 				}, 500)
 				var pCount = this.originList.length - this.playCount
 				if (originIndex == pCount) {
@@ -236,9 +282,8 @@
 				this.isqp = e.detail.show
 			},
 			detail(detail) {
-				navigateTo(`/pagesC/ttvideo/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(detail)) +
-					'&tt_album_id=' + detail.douyinAlbumId + '&tt_episode_id=' + detail.douyinEpisodeId +
-					`&playNext=1`);
+				navigateTo(`/pagesC/video/ttVideoDetail?data=` + encodeURIComponent(JSON.stringify(detail)) +
+					`&playNext=1`)
 			},
 			collect(vedioId, index) {
 				this.originList[index].collect = 1