dreamland/pages/dream/view/vodShort.vue

<template name="vodShort">
	<view>
		<swiper class="swiper" autoplay="false" vertical="true" interval="990000" @change="changeVod">
			<swiper-item v-for="(v, k) in item">
		
				<video
					:src="v.video"
					preload
					:show-play-btn="true"
					:show-center-play-btn="false"
					:controls="false"
					:loop="true"
					:id="id(k)"
					objectFit="fill"
					:enable-progress-gesture="false"
					@click="start"
					ref="video_url"
					play-btn-position="center"
					class="video"
					:x5-playsinline="true"
					:playsinline="true"
					:webkit-playsinline="true"
					:x5-video-can-play-with-audio="true"
					x5-video-orientation="portraint"
					
					>
				</video>
				
				<cover-image v-if="show_play_poster" class="poster" :src="v.pic">
				</cover-image>
				
				<cover-image
				class="ico-video-play" v-if="show_play" 
				@tap="start"></cover-image>
				
				<pos :item="v" :down="v.video"></pos>
				
				<cover-view class="cover-view-right" v-if="showInfo">
					<cover-image :src="item[0].pic"
					 class="avater img" 
					 @click.stop="tapAvater"></cover-image>
					
					<text class="right-follow">+</text>
					<cover-image 
					style="position:relative;top:-20upx;"
					:src="up ? '../../static/video/axc.png' : '../../static/video/bed.png'" 
					class="img-left" @click.stop="tapLove"></cover-image>
					
					<text class="right-text">1</text>
					<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" 
					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>
					
					<cover-view class="progressBar" :animation="animationData" ></cover-view>
					
					
				</cover-view>
		
		
		
		
		
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import pos from "@/pages/dream/view/pos.vue";
var play = true;
export default {
	name: "vodShort",
	props: {
		config : {
			type : Object,
			value : null
		},
		item : {
			type    : Array,
			value	: null
		},
	},
	data() {
		return {
			page : 0,
			up: false,
			time: 0,
			barWidth:0,
			animationData: {},
			times:null,
			show_play:true,
			show_play_poster:true,
			muted: true,
			current_index: 0,
			showInfo: false,
		};
	},
	created() {
		/*
		进入页面自动播放，已取消
		setTimeout(()=>{
			play = true;
			this.start();
		},1000)
		*/
	},
	methods:{
		//获取video_id
		id : function(index)  {
			var video_id = this.item[index].id;
			return 'video_short_' + video_id;
		},
		update : function(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;
		},
		start : function()  {
			this.config.stop[this.config.page] = this;
			this.handle(play);
		},
		stop : function()  {
			this.handle(false);
		},
		handle : function(state)  {
			this.show_play_poster = false;
			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;
				//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);
			}
		},
		changeVod : function(e)  {
			// 暂停之前的视频
			this.stop();
			this.current_index = e.detail.current;
			// 播放现在的视频
			this.start();
			
			// 判断是否第一条
			if (e.detail.current == 0) {
				//console.log('到顶了');
				return false;
			}
			
			// 判断是否最后一条
			if (e.detail.current == this.item.length-1) {
				//console.log('到底了');
				return false;
			}
			
		},
		tapMsg : function(e)  {
			console.log(5, e);
		},
		tapShare : function(e) {
			console.log(6, e);
		},
		tapLove : function(e)  {
			// item.is_dianzan
			this.item[this.current_index].is_dianzan = !this.item[this.current_index].is_dianzan;
			console.log(7, e);
		}
	},
	watch: {
		play : function(newVal, oldVal) {
			this.start();
		}
	},
	components:{
		pos
	}
}
</script>

<style>
.swiper{
	width: 100vw;
	height: 100vh;	
	/*position: fixed;*/
	position: relative;
	top: 0;
	left: 0;
}
.video {
	width: 100%;
	height: 100%;
	position: relative;
}
.play{
	position: absolute;
	width: 20vw;
	height: 20vw;
	left: 40vw;
	top: 40vh;
	opacity: 0.5;
}
.poster{
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.progressBar {
	border-radius: 2upx;
	height: 4upx;
	background-color: #FF4500;
	z-index: 999999;
	position: absolute;
	bottom: 68rpx;
}
.ico-video-play{
  background: url(@/static/icon/ico-video-play.png) no-repeat;
  background-size: cover;
  width: 100rpx;
  height: 100rpx;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0);
}
.cover-view-left {
	position: absolute;
	margin-left: 20upx;
	width: 580upx;
	bottom: 110upx;
	z-index: 9999;
	font-size: 14px;
	color: #ffffff;
}
.left-text {
	font-size: 14px;
	color: #ffffff;
}

.cover-view-right {
	position: absolute;
	bottom: 40px;
	right: 30upx;
	z-index: 9999;
	text-align: center;
}

.avater {
	border-radius: 50%;
	border-width: 2px;
	border-style: solid;
	border-color: #ffffff;
}

.img {
	height: 90upx;
	width: 90upx;
	margin-bottom: 110upx;
}

.img-left {
	width: 80upx;
	height: 66upx;
	padding-left: 4px;
}
.right-follow {
	position: absolute;
	z-index: 100;
	top: 75upx;
	left: 28upx;
	color: #ffffff;
	font-size: 16px;
	width: 34upx;
	height: 34upx;
	background-color: #f12f5b;
	text-align: center;
	line-height: 34upx;
	border-radius: 17upx;
}

.right-text {
	color: #ffffff;
	font-size: 11px;
	text-align: center;
	margin-bottom: 40upx;
}
.musicIcon {
	margin-top: 40upx;
}
@keyframes rotating {
	from {
		transform: rotate(0);
	}
	to {
		transform: rotate(360deg);
	}
}
.view-left-text-content {
	flex: 1;
}
.view-left-text {
	color: #ffffff;
	font-size: 18px;
	margin-bottom: 10upx;
	font-weight: bold;
}
.text-content-text {
	color: #ffffff;
	font-size: 16px;
	line-height: 50upx;
	height: 100upx;
	overflow: hidden;
}
</style>