front/lib/dever/package/video.vue

<template name="dever-video">
	<view>
		<view class="player">
			<video
				:src="src"
				preload="auto"
				:initial-time="initial_time"
				:autoplay="false"
				:show-mute-btn="true"
				:muted="muted"
				:show-play-btn="true"
				:show-center-play-btn="false"
				:controls="control"
				:loop="true"
				:id="id()"
				:objectFit="objectFit"
				:enable-progress-gesture="false"
				play-btn-position="center"
				class="video"
				:playsinline="true"
				:webkit-playsinline="true"
				:x5-video-player-fullscreen="true"
				:x5-playsinline="true"
				x-webkit-airplay="allow"
				x5-video-player-type="h5-page"
				:page-gesture="false"
				:poster="pic"
				@timeupdate="timeUpdate"
				@play="onPlay"
				@pause="onPause"
				@ended="onPause"
				>
			</video>
		</view>
		<view class="control" @click="open" :style="control_style">
			<cover-image v-if="poster && pic" class="poster" :src="pic">
			</cover-image>
			
			<cover-image
			class="ico-video-play" v-if="!playButton"></cover-image>
			
			<dever-position :item="position_item" :down="src" :button="position_save" v-if="position_item"></dever-position>
			
			<cover-view class="cover-view-right" v-if="showInfo">
				<cover-image :src="pic"
				 class="avater img" 
				 @click.stop="tapAvater"></cover-image>
				
				<text class="right-follow">+</text>
				<cover-image 
				style="position:relative;top:-20upx;"
				:src="up ? '../../static/dever/axc.png' : '../../static/dever/bed.png'" 
				class="img-left" @click.stop="tapLove"></cover-image>
				
				<text class="right-text">1</text>
				<cover-image src="@/static/dever/ay2.png" 
				style="height: 80upx;" class="img-left" @click.stop="tapMsg"></cover-image>
				
				<text class="right-text">10</text>
				<cover-image src="@/static/dever/b6p.png" 
				style="height: 76upx;" class="img-left" @click.stop="tapShare"></cover-image>
				
				<text class="right-text">10</text>
				<cover-image src="@/static/dever/changpian.png" class="musicIcon img">
				</cover-image>
			
			</cover-view>
		</view>
	</view>
</template>

<script>
import bgm from "@/lib/dever/bgm.js"
import deverPosition from "@/lib/dever/package/position.vue";
export default {
	props: {
		src : {
			type    : String,
			value	: null
		},
		index : {
			type    : Number,
			value	: null
		},
		vid : {
			type    : String,
			value	: null
		},
		pic : {
			type    : String,
			value	: null
		},
		auto : {
			type    : Boolean,
			value	: false
		},
		control : {
			type    : Boolean,
			value	: false
		},
		disabled : {
			type    : Boolean,
			value	: false
		},
		position_item : {
			type    : Array,
			value	: null
		},
		position_save : {
			type    : String,
			value	: null
		},
		type : {
			type    : String,
			value	: 1
		},
	},
	data() {
		return {
			objectFit : 'fill',
			play : false,
			playButton : false,
			muted : true,
			poster : true,
			video : false,
			showInfo : false,
			initial_time : 0,
			time : {},
			control_style : '',
		};
	},
	mounted() {
		if (this.type == 2) {
			this.objectFit = '';
		}
		var time = this.Dever.data('video_' + this.vid);
		if (time) {
			time = parseFloat(time);
			this.initial_time = time;
		}
		this.video = uni.createVideoContext(this.id(), this);
		if (this.auto) {
			this.start();
		}
	},
	methods:{
		//获取video_id
		id : function()  {
			return 'video_' + this.vid + '_' + this.index;
		},
		onPlay : function() {
			if (this.control) {
				this.control_style = 'height:0%;width:0%';
				this.setStart();
			}
		},
		onPause : function() {
			if (this.control) {
				this.control_style = 'height:100%;width:100%';
				this.stop(true);
			}
		},
		setStart : function() {
			this.$emit('update:load', true);
			this.$emit('play', 'start');
			this.poster = false;
			this.play = true;
			this.playButton = true;
			this.muted = false;
		},
		autoStart : function() {
			//h5下无法自动播放，这里考虑使用先静音播放
			this.muted = true;
			this.video.play();
			this.video.currentTime = 0;
			this.video.pause();
		},
		start : function()  {
			if (this.disabled) {
				this.Dever.alert('无权限播放，请先购买座位');
				return;
			}
			this.setStart();
			//bgm.stop();
			this.video.play();
		},
		stop : function(state) {
			var self = this;
			//this.poster = true;
			if (state) {
				if (this.play) {
					self.video.pause();
				}
				this.playButton = false;
			} else {
				/*
				setTimeout(function() {
					self.video.pause();
				}, 1000);
				*/
			}
			this.muted = true;
			this.play = false;
			this.$emit('play', 'stop');
		},
		open : function()  {
			if (!this.play) {
				this.start();
			} else {
				this.stop(true);
			}
		},
		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);
		},
		timeUpdate : function(e) {
			if (this.play == true) {
				var currentTime = e.detail.currentTime;
				currentTime = parseInt(currentTime);
				if (!this.time[currentTime]) {
					this.time[currentTime] = currentTime;
					this.$emit('play', 'time', [this, currentTime]);
					//记录播放进度
					this.Dever.data('video_' + this.vid, this.currentTime);
				}
			}
		}
	},
	components:{
		deverPosition
	}
}
</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;
	*/
	width:100%;
	height:100%;
	position: relative;
	background-color: transparent;
	z-index: 1;
}
.uni-video-bar {
	z-index:10;
}
.poster{
	background-size: cover;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.ico-video-play{
  background: url(@/static/dever/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>