edit

pages/dream/view.vue

@@ -31,6 +31,10 @@ export default{
 			config : {
 				position: ["tl","tc","tr","cl","cc","cr","bl","bc","br"],
 				position_f: ["tl","tr","bl","br"],
+				//记录当前第几页
+				page : 1,
+				//记录哪个页面需要停止
+				stop : [],
 			}
 		}
 	},
@@ -48,7 +52,18 @@ export default{
 	},
 	methods:{
 		change : function(e) {
-			this.swiper.index = e.detail.current;
+			this.swiper.index = e.detail.current;
+			this.config.page = this.swiper.index + 1;
+			if (this.config.stop.length) {
+				var i = 0;
+				for (i in this.config.stop) {
+					if (this.config.page == i) {
+						this.config.stop[i].start();
+					} else {
+						this.config.stop[i].stop();
+					}
+				}
+			}
 		},
 		view : function() {
 			this.Dever.location('dream/view?id=1');

pages/dream/view/vod.vue

@@ -9,6 +9,10 @@
 export default {
 	name: "vod",
 	props: {
+		config : {
+			type : Object,
+			value : null
+		},
 		item : {
 			type    : Object,
 			value	: null

pages/dream/view/vodShort.vue

@@ -1,41 +1,37 @@
 <template name="vodShort">
 	<view>
-		<swiper class="swiper" autoplay="false" vertical="true" interval="990000" @change="changeVideo">
-			<swiper-item v-for="(v, k) in item.text">
+		<swiper class="swiper" autoplay="false" vertical="true" interval="990000" @change="change">
+			<swiper-item v-for="(v, k) in item">
 		
 				<video
 					:src="v.video"
-					preload
-					:muted="muted"
-					show-play-btn="true"
-					controls="false"
-					v
-					loop="true"
-					:id="`video_${v.order}`"
+					preload
+					:show-play-btn="true"
+					:show-center-play-btn="false"
+					:controls="false"
+					:loop="true"
+					:id="id(k)"
 					objectFit="fill"
 					:enable-progress-gesture="false"
-					@click="clickVideo"
+					@click="start"
 					ref="video_url"
 					play-btn-position="center"
 					class="video"
 					:poster="v.pic"
-					@timeupdate="timeupdate">
+					@timeupdate="update">
 				</video>
 				
 				<cover-image 
 				class="play" v-if="show_play" 
-				@tap="videoPlay"
-				src="../../static/video/play.png"></cover-image>
+				@tap="start"
+				src="@/static/icon/ico-video-play.png"></cover-image>
 				
 				<cover-view class="cover-view-left">
-					<text class="view-left-text">@{{ v.name }}</text>
-					<view class="view-left-text-content">
-						<text class="text-content-text">{{ v.name }}</text>
-					</view>
+					
 				</cover-view>
 				
-				<cover-view class="cover-view-right">
-					<cover-image :src="item.pic"
+				<cover-view class="cover-view-right" v-if="showInfo">
+					<cover-image :src="item[0].pic"
 					 class="avater img" 
 					 @click.stop="tapAvater"></cover-image>
 					
@@ -46,15 +42,15 @@
 					class="img-left" @click.stop="tapLove"></cover-image>
 					
 					<text class="right-text">1</text>
-					<cover-image src="../../static/video/ay2.png" 
+					<cover-image src="@/static/video/ay2.png" 
 					style="height: 80upx;" class="img-left" @click.stop="tapMsg"></cover-image>
 					
 					<text class="right-text">10</text>
-					<cover-image src="../../static/video/b6p.png" 
+					<cover-image src="@/static/video/b6p.png" 
 					style="height: 76upx;" class="img-left" @click.stop="tapShare"></cover-image>
 					
 					<text class="right-text">10</text>
-					<cover-image src="../../static/video/changpian.png" class="musicIcon img">
+					<cover-image src="@/static/video/changpian.png" class="musicIcon img">
 					</cover-image>
 					
 					<cover-view class="progressBar" :animation="animationData" ></cover-view>
@@ -72,12 +68,16 @@
 </template>
 
 <script>
-var play = false;
+var play = true;
 export default {
 	name: "vodShort",
 	props: {
+		config : {
+			type : Object,
+			value : null
+		},
 		item : {
-			type    : Object,
+			type    : Array,
 			value	: null
 		},
 	},
@@ -88,65 +88,65 @@ export default {
 			barWidth:0,
 			animationData: {},
 			times:null,
-			play: false,
-			show_play:false,
+			show_play:true,
 			muted: true,
-			current_index: 0
+			current_index: 0,
+			showInfo: false,
 		};
 	},
 	created() {
+		/*
+		进入页面自动播放，已取消
 		setTimeout(()=>{
 			play = true;
-			this.videoPlay();
+			this.start();
 		},1000)
+		*/
 	},
 	methods:{
-		timeupdate(event) {
+		//获取video_id
+		id(index) {
+			var video_id = this.item[index].id;
+			return 'video_' + video_id;
+		},
+		update(event) {
 			let t_w = parseInt(this.width);
 			this.duration = event.detail.duration;
 			this.time = event.detail.currentTime;
 			let width = (this.time / this.duration) * t_w;
 			let w = 0;
 		},
-		clickVideo() {
-			// console.log('单视频点击事件');
-			this.videoPlay();
+		start() {
+			this.config.stop[this.config.page] = this;
+			this.handle(play);
 		},
-		videoPlay() {
-			console.info(this.item.text);
-			let video_id = this.item.text[this.current_index].order;
-			
-			if (play) {
-				console.log('播放视频',`video_${video_id}`);
-				this.muted = false;
-				this.videoCtx = uni.createVideoContext(`video_${video_id}`, this);
+		stop() {
+			this.handle(false);
+		},
+		handle(state) {
+			var id = this.id(this.current_index);
+			if (state) {
+				this.videoCtx = uni.createVideoContext(id, this);
 				this.videoCtx.play();
+				this.muted = false;
 				this.show_play = false;
 				play = false;
-			} else {
-				console.log('暂停视频',`video_${video_id}`);
-				this.muted = true;
-				this.videoCtx = uni.createVideoContext(`video_${video_id}`, this);
+				//console.info('播放', id, this.current_index);
+			} else if(!play) {
+				this.videoCtx = uni.createVideoContext(id, this);
 				this.videoCtx.pause();
+				this.muted = true;
 				this.show_play = true;
 				play = true;
+				//console.info('暂停', id, this.current_index);
 			}
 		},
-		videoPause() {
-			let video_id = this.item.text[this.current_index].order;
-			this.videoCtx = uni.createVideoContext(`video_${video_id}`, this);
-			this.videoCtx.pause();
-			this.show_play = true;
-			play = true;
-		},
-		changeVideo(e){
-			
+		change(e){
 			// 暂停之前的视频
-			this.videoPause();
+			this.stop();
 			this.current_index = e.detail.current;
-			console.log(e.detail.current);
 			// 播放现在的视频
-			this.videoPlay();
+			this.start();
 			
 			// 判断是否第一条
 			if( e.detail.current == 0 ){
@@ -155,7 +155,7 @@ export default {
 			}
 			
 			// 判断是否最后一条
-			if( e.detail.current == this.item.text.length-1 ){
+			if( e.detail.current == this.item.length-1 ){
 				console.log('到底了');
 				return false;
 			}
@@ -169,13 +169,13 @@ export default {
 		},
 		tapLove(e) {
 			// item.is_dianzan
-			this.item.text[this.current_index].is_dianzan = !this.item.text[this.current_index].is_dianzan;
+			this.item[this.current_index].is_dianzan = !this.item[this.current_index].is_dianzan;
 			console.log(7, e);
 		}
 	},
 	watch: {
 		play(newVal, oldVal) {
-			this.videoPlay();
+			this.start();
 		}
 	}
 }