dreamland/lib/dever/components/video.nvue

<template name="dever-video">
	<view>
		<view class="player">
			<video
				:src="src"
				preload
				autoplay
				:muted="!play"
				:show-play-btn="true"
				:show-center-play-btn="false"
				:controls="false"
				:loop="true"
				:id="id()"
				objectFit="fill"
				:enable-progress-gesture="false"
				play-btn-position="center"
				class="video"
				:playsinline="true"
				:webkit-playsinline="true"
				x-webkit-airplay="allow"
				x5-video-player-type="h5-page"
				>
			</video>
		</view>
		<view class="control" @click="open">
			<cover-image v-if="poster" class="poster" :src="pic">
			</cover-image>
			
			<cover-image
			class="ico-video-play" v-if="!play"></cover-image>
			
			<pos :item="item" :down="src" v-if="item"></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>
		</view>
	</view>
</template>

<script>
import pos from "@/pages/dream/view/pos.vue";
export default {
	name: "dever-video",
	props: {
		item : {
			type    : Object,
			value	: null
		},
		src : {
			type    : String,
			value	: null
		},
		index : {
			type    : Number,
			value	: null
		},
		vid : {
			type    : String,
			value	: null
		},
		pic : {
			type    : String,
			value	: null
		},
	},
	data() {
		return {
			play : false,
			poster : true,
			video : false,
			showInfo : false,
		};
	},
	mounted() {
		this.video = uni.createVideoContext(this.id(), this);
	},
	methods:{
		//获取video_id
		id : function()  {
			return 'video_' + this.vid + '_' + this.index;
		},
		start : function()  {
			this.poster = false;
			this.video.play();
			this.play = true;
		},
		stop : function() {
			this.video.pause();
			this.play = false;
		},
		open : function()  {
			if (!this.play) {
				this.start();
			} else {
				this.stop();
			}
		},
	},
	components:{
		pos
	}
}
</script>
<style scoped>
.control {
	width: 100%;
	height: 100%;
	z-index: 2;
	background: transparent;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
}
.player {
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
	background: transparent;
	position: absolute;
	left: 0;
	top: 0;
	overflow: hidden;
}
.video {
	width: 101%;
	height: 101%;
	margin-left: -5rpx;
	margin-top: -5rpx;
	position: relative;
	background-color: transparent;
	z-index: 1;
}
.poster{
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.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>