修改视频

pages/video/index.vue

 <style>
-	.video_Page{
-		width:100%;
-		height:100%;
+	.video_Page {
+		width: 100%;
+		height: 100%;
 		position: relative;
 	}
+
 	.video_Page .sharebox_top_nav {
 		width: 100%;
 		display: flex;
 		position: absolute;
-		z-index:999;
-		left:20px;
+		z-index: 999;
+		left: 20px;
+	}
+
+	.video_Page .uni_vdplayer {
+		width: 100%;
+		height: 100%;
 	}
-	.player-video{
-		width:100%;
-		/* height:100%; */
+
+	.video_Page .player-video {
+		width: 100%;
+		height: 100%;
 	}
-	.video_Bottom{
+
+	.video_Bottom {
 		position: absolute;
-		bottom:20px;
-		right:15px;
-		width:53%;
-		height:42px;
-		z-index:999;
+		bottom: 20px;
+		right: 15px;
+		width: 53%;
+		height: 42px;
+		z-index: 999;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 	}
-	.good_Detail{
-		width:50px;
-		height:50px;
+
+	.good_Detail {
+		width: 50px;
+		height: 50px;
 	}
-	.good_other{
-		width:40px;
-		height:40px;
+
+	.good_other {
+		width: 40px;
+		height: 40px;
 	}
-	.video_detail{
+
+	.video_detail {
 		position: absolute;
-		width:210px;
-		height:65px;
-		top:-80px;
-		left:-230%;
+		width: 210px;
+		height: 65px;
+		top: -80px;
+		left: -230%;
 		background-color: #fff;
 		border-radius: 5px;
-		padding:5px;
+		padding: 5px;
 	}
-	.video_Tra{
+
+	.video_Tra {
 		width: 0;
 		height: 0;
 		border-left: 7px solid transparent;
 		border-right: 7px solid transparent;
 		border-top: 10px solid #fff;
 		position: absolute;
-		top:-16px;
-		left:18px;
+		top: -16px;
+		left: 18px;
 	}
-	.video_cha{
-		width:17px;
-		height:17px;
+
+	.video_cha {
+		width: 17px;
+		height: 17px;
 		position: absolute;
-		right:-5px;
-		top:-5px;
+		right: -5px;
+		top: -5px;
 	}
-	.video_Shop{
+
+	.video_Shop {
 		display: flex;
 		position: relative;
 	}
-	.video_imgCt{
-		width:55px;
-		height:55px;
-		margin-right:5px;
+
+	.video_imgCt {
+		width: 55px;
+		height: 55px;
+		margin-right: 5px;
 	}
-	.video_shopTitle{
-	   width:114px;
+
+	.video_shopTitle {
+		width: 114px;
 		overflow: hidden;
 		text-overflow: ellipsis;
 		display: -webkit-box;
 		-webkit-line-clamp: 2;
 		-webkit-box-orient: vertical;
-	   font-size:11px;
-	   color:#111111;
+		font-size: 11px;
+		color: #111111;
 	}
-	.video_price{
-		color:#FF3F47;
-		font-size:13px;
-		margin-top:6px;
+
+	.video_price {
+		color: #FF3F47;
+		font-size: 13px;
+		margin-top: 6px;
 	}
-	.v_fx{
+
+	.v_fx {
 		width: 40px;
 		height: 40px;
 		border: none;
@@ -95,21 +113,24 @@
 		line-height: unset;
 		background: none;
 	}
-	.video_Page button:after{
+
+	.video_Page button:after {
 		border: none;
 	}
-	.vd-cover{
+
+	.vd-cover {
 		position: absolute;
-		top:0;
-		left:0;
-		width:100%;
-		height:100%;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
 		display: flex;
 		align-items: center;
 		justify-content: center;
 	}
+
 	video::-webkit-media-controls {
-	  display:none !important;
+		display: none !important;
 	}
 </style>
 <template>
@@ -119,16 +140,15 @@
 				<u-icon name="arrow-left" size="48" color="#fff"></u-icon>
 			</view>
 		</view>
-		<swiper :interval="3000" :duration="100" :vertical="true" :current="videoIndex" @change="handleSlider" :style="{'height':swiperHeight}">
+		<swiper :indicator-dots="false" :duration="200" :vertical="true" :current="videoIndex" @change="handleSlider" :style="{'height':swiperHeight}">
 			<block v-for="(item,index) in vlist" :key="index">
-				<swiper-item style="width:100%;height:100%">
+				<swiper-item>
 					<view class="uni_vdplayer">
-						<video :id="'myVideo' + index" :ref="'myVideo' + index" v-if="index==hkindex||index==hkindex-1||index==hkindex+1" 
-						class="player-video" :loop="true" :show-progress="true" :controls="false"
-						:show-center-play-btn="false" :style="{'height':swiperHeight}"  :src="item.video_url" autoplay="true" />
+						<video :id="'myVideo' + index" :ref="'myVideo' + index" class="player-video" :loop="true" :show-progress="true"
+						 :controls="false" :show-center-play-btn="false" :src="item.video_url" :autoplay="index==videoIndex" />
 					</view>
 					<!-- 中间播放按钮 -->
-					<view class="vd-cover flexbox" @click="handleClicked(index)">
+					<view class="vd-cover flexbox" @click="handleClicked(index)" >
 						<image v-if="!isPlay" style="width:74px;height:74px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/v_pause.png"></image>
 					</view>
 				</swiper-item>
@@ -140,7 +160,7 @@
 					<view class="video_detail">
 						<view class="video_Shop">
 							<view class="video_imgCt">
-								<image style="width:100%;height:100%;" :src="comGoodImg"/>
+								<image style="width:100%;height:100%;" :src="comGoodImg" />
 							</view>
 							<view>
 								<view class="video_shopTitle">
@@ -176,14 +196,14 @@
 		data() {
 			return {
 				vlist: [],
-				videoIndex:0,
-				swiperHeight:0,
+				videoIndex: 0,
+				swiperHeight: 0,
 
-				GoodsId:0, //商品id
+				GoodsId: 0, //商品id
 				nav: 0,
-				changeIndex:0,
+				changeIndex: 0,
 
-				goodObj:{}, //商品对象
+				goodObj: {}, //商品对象
 				msg: {
 					pageIndex: 1,
 					pageSize: 1,
@@ -191,40 +211,38 @@
 					GoodsType: 0,
 					CategoryIds: '',
 					OrderBy: 0,
-					IsVideo:1
+					IsVideo: 1
 				},
-				hkindex:0,
-				isShowInfo:true, //显示商品弹窗
+				hkindex: 0,
+				isShowInfo: true, //显示商品弹窗
 
-				comGoodImg:'', //商品缩小图
-				comGoodTitle:'', //商品名称
-				comGoodPrice:'', //商品价格
-				showSku:false,
+				comGoodImg: '', //商品缩小图
+				comGoodTitle: '', //商品名称
+				comGoodPrice: '', //商品价格
+				showSku: false,
 				sku: {},
-				showAuth:false,
+				showAuth: false,
 				u: {},
 
-				isPlay:true, //当前视频是否播放中
+				isPlay: true, //当前视频是否播放中
+
+				videoContextList: []
 			}
 		},
 		components: {
 			goodSku,
 			auth
 		},
-		onReady(){
+		onReady() {
+			this.getGoodInfo(); //获取传过来的数据
+			this.getList();
 		},
-		onLoad(option){ 
-			console.log(option,'optionsss');
+		onLoad(option) {
+			console.log(option, 'optionsss');
 			this.GoodsId = option.GoodsId;
-			uni.getSystemInfo({	//获取系统信息
-				success: (res) => {
-				   this.swiperHeight = res.windowHeight + 'px'
-				},
-				fail: (res) => {
-					console.log('error')
-				}
-			})
-			this.vlist=[];
+			this.sysheight = uni.getSystemInfoSync().windowHeight;
+			this.swiperHeight = `${this.sysheight}px` 
+			this.vlist = [];
 		},
 		methods: {
 			//返回上一页
@@ -235,54 +253,54 @@
 			},
 			// 滑动切换 
 			handleSlider(e) {
-				console.log(e);
-				this.hkindex = e.detail.current;
-				let videoContext = wx.createVideoContext("myVideo" + e.detail.current + "")
-				var indx = e.detail.current;
-				let videoContexta = wx.createVideoContext("myVideo" + indx + "")  
-				
+				let curIndex = e.detail.current
+				console.log(curIndex);
+				if(curIndex>0){
+					this.videoContextList[curIndex-1].pause()
+				}
+				if(curIndex<this.vlist.length-1){
+					this.videoContextList[curIndex+1].pause()
+				}
+				this.videoContextList[curIndex].play()
+				this.videoContextList[curIndex].seek(0)
+				this.isPlay=true
+				this.videoIndex = curIndex;
 				
-				this.comGoodImg=this.vlist[this.hkindex].picUrl;
-			    this.comGoodTitle=this.vlist[this.hkindex].name;
-			    this.comGoodPrice=this.vlist[this.hkindex].price;
-				this.GoodsId = this.vlist[this.hkindex].id;
+				console.log(this.vlist,'this.vlist');
+				this.comGoodImg = this.vlist[this.curIndex].picUrl;
+				this.comGoodTitle = this.vlist[this.curIndex].name;
+				this.comGoodPrice = this.vlist[this.curIndex].price;
+				this.GoodsId = this.vlist[this.curIndex].id;
 
-				this.sku=this.vlist[this.hkindex];
-				this.isPlay = true;
+				this.sku = this.vlist[this.curIndex];
 
-				videoContexta.pause();
-				videoContexta.seek(0);
-				videoContext.play();
-				let xz = this.vlist.length- e.detail.current ;
+				let xz = this.vlist.length - e.detail.current;
 				if (xz == 1) {
 					this.msg.pageIndex++;
 					this.getList(); //加载更多视频
 				}
 			},
 			//点击暂停
-			handleClicked(index){
-				if(this.isPlay){
+			handleClicked(index) {
+				if (this.isPlay) {
 					this.pause(index)
-				}else{
+				} else {
 					this.play(index)
 				}
 			},
 			// 播放
 			play(index) {
-				let videoContext = wx.createVideoContext("myVideo" + index,this)
-				videoContext.play()
+				this.videoContextList[index].play()
 				this.isPlay = true
 			},
 			// 暂停
 			pause(index) {
-				let videoContext = wx.createVideoContext("myVideo" + index,this)
-				videoContext.pause()
+				this.videoContextList[index].pause()
 				this.isPlay = false
 			},
 			//获取传递过来商品信息
-			getGoodInfo(){
-				this.request2(
-				  {
+			getGoodInfo() {
+				this.request2({
 						url: "/api/AppletGoods/GetAppletGoodsInfo",
 						data: {
 							GoodsId: this.GoodsId,
@@ -290,22 +308,29 @@
 					},
 					(res) => {
 						if (res.resultCode == 1) {
-						console.log(res,'商品');
+							console.log(res, '商品');
 							this.goodObj = res.data.goods;
-					  let obj={
-						  OriginalPrice:this.goodObj.original_price,
-						  id:this.goodObj.id,
-						  name:this.goodObj.name,
-						  picUrl:this.goodObj.cover_pic,
-						  price:this.goodObj.price,
-						  video_url:this.goodObj.video_url
+							let obj = {
+								OriginalPrice: this.goodObj.original_price,
+								id: this.goodObj.id,
+								name: this.goodObj.name,
+								picUrl: this.goodObj.cover_pic,
+								price: this.goodObj.price,
+								video_url: this.goodObj.video_url
 							}
 							this.vlist.push(obj);
-					  this.comGoodImg=this.goodObj.cover_pic;
-					  this.comGoodTitle=this.goodObj.name;
-					  this.comGoodPrice=this.goodObj.price;
+							this.comGoodImg = this.goodObj.cover_pic;
+							this.comGoodTitle = this.goodObj.name;
+							this.comGoodPrice = this.goodObj.price;
 							this.GoodsId = this.goodObj.id;
-					  this.sku=obj;
+							this.sku = obj;
+							this.videoContextList.push(uni.createVideoContext('myVideo0', this));
+							// this.videoContextList = []
+							// console.log(this.vlist,'vlist');
+							// for (var i = 0; i < this.vlist.length; i++) {
+								
+							// }
+							console.log(this.videoContextList,'第一次加载');
 						} else {
 
 						}
@@ -313,38 +338,44 @@
 				);
 			},
 			//滚动加载的商品信息
-			getList(){
+			getList() {
 				this.request2({
 						url: '/api/AppletGoods/GetAppletGoodsPageListForZY',
 						data: this.msg
 					},
 					res => {
-						console.log(res,'resss');
+						console.log(res, 'resss');
 						if (res.resultCode == 1) {
-							var data=res.data.pageData;
-							if(data.length>0){
-								let obj={
-							      OriginalPrice:data[0].original_price,
-								  id:data[0].id,
-								  name:data[0].name,
-								  picUrl:data[0].cover_pic,
-								  price:this.goodObj.price,
-								  video_url:data[0].video_url
+							var data = res.data.pageData;
+							if (data.length > 0) {
+								let obj = {
+									OriginalPrice: data[0].original_price,
+									id: data[0].id,
+									name: data[0].name,
+									picUrl: data[0].cover_pic,
+									price: this.goodObj.price,
+									video_url: data[0].video_url
 								}
 								this.vlist.push(obj);
+								this.videoContextList = []
+								for (var i = 0; i < this.vlist.length; i++) {
+									this.videoContextList.push(uni.createVideoContext('myVideo' + i, this));
+								}
 							}
 						}
 					}
 				);
 			},
 			//回到首页
-			goHome(){
-				uni.redirectTo({ url: "/pages/index/index" });
+			goHome() {
+				uni.redirectTo({
+					url: "/pages/index/index"
+				});
 			},
 			//加入购物车或购买
-			getBuy(){
+			getBuy() {
 				this.u = uni.getStorageSync('mall_UserInfo');
-				console.log(this.u,'uuu');
+				console.log(this.u, 'uuu');
 				if (!this.u) {
 					this.u = {
 						nickName: '未登录',
@@ -363,24 +394,22 @@
 				this.showAuth = false;
 			},
 			//分享
-			onShareAppMessage(){
+			onShareAppMessage() {
 				return {
-				  title:this.comGoodTitle,
+					title: this.comGoodTitle,
 					path: "/pages/video/index?GoodsId=" + this.GoodsId,
-				  imageUrl:this.comGoodImg
+					imageUrl: this.comGoodImg
 				};
 			},
 			//点击商品
-			getShowInfo(){
-				this.isShowInfo=!this.isShowInfo;
+			getShowInfo() {
+				this.isShowInfo = !this.isShowInfo;
 			}
 
 		},
 		mounted() {
-			this.getGoodInfo(); //获取传过来的数据
-			this.getList();
 		},
-		created(){
+		created() {
 			this.nav = uni.getMenuButtonBoundingClientRect().top;
 		},
 	}