完善功能

pages/wumen/video.vue

@@ -0,0 +1,196 @@
+<template>
+	<view class="container">
+		<z-nav-bar :title="title" bgColor="#5188e5" fontColor="#fff"></z-nav-bar>
+		<view class="contentBox">
+			<video
+				class="video_file"
+				:id="`video_${objId}`"
+				:ref="`video_${objId}`"
+				:src="src"
+				:poster="poster"
+				loop
+				object-fit="contain"
+				:show-play-btn="false"
+				:show-center-play-btn="false"
+				:controls="false"
+				:enable-progress-gesture="false"
+				:autoplay="videoPlayId == objId"
+				:style="'height: '+screenHeight + 'px'"
+				@timeupdate="onScheduleChange"
+				@waiting="onWaiting"
+			></video>
+			<!-- 播放按钮 -->
+			<view class="play_btn" @click="onPlay">
+				<image class="icon_play" v-if="playState == 1000" src="http://qn.kemean.cn/upload/202103/08/1615183536616rn7yfe5g.png" mode="aspectFit"></image>
+			</view>
+			<view class="play_schedule" :style="{bottom: progressBottom + 'rpx'}">
+				<view class="schedule_bg"></view>
+				<view class="schedule" :style="{ width: schedule + 'rpx' }"></view>
+				<view class="progress_drag_dot" v-if="progressDrag"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { mapState, mapMutations } from 'vuex';
+export default {
+	data() {
+		return {
+			schedule: 0,
+			// 1000 待播放
+			// 2000 播放中
+			// 3000 播放缓冲中
+			playState: 1000,
+			// 是否拖动进度
+			progressDrag: false,
+			// 视频总长度
+			duration: 0,
+			videoCtx: null,
+			objId:''
+		};
+	},
+	onLoad(e) {
+		console.log('1111',e)
+		this.src = e.src
+		this.title = e.title
+	},
+	computed: {
+		...mapState(['videoPlayId'])
+	},
+	watch: {
+		videoPlayId(val) {
+			if (val == this.objId) {
+				setTimeout(() => {
+					this.videoCtx.play();
+					this.playState = 2000;
+				}, 200);
+			} else {
+				setTimeout(() => {
+					this.videoCtx.pause();
+					this.videoCtx.seek(0);
+					this.playState = 1000;
+					this.schedule = 0;
+				},100);
+			}
+		}
+	},
+	mounted() {
+		console.log('src', this.src)
+		this.videoCtx = uni.createVideoContext(`video_${this.objId}`, this);
+		if(this.videoPlayId == this.objId){
+			setTimeout(() => {
+				this.videoCtx.play();
+				this.playState = 2000;
+			}, 200);
+		}
+		let throttling = true;
+		uni.$on("videoProgress", res => {
+			if(throttling){
+				throttling = false;
+				setTimeout(() => {
+					throttling = true;
+					if (res.progress == 1) {
+						this.progressDrag = true;
+					} else {
+						this.progressDrag = false;
+					}
+					if (this.videoPlayId == this.objId && res.progressValue) {
+						this.schedule = res.progressValue * 750;
+						this.videoCtx.seek(this.duration * res.progressValue);
+					}
+				}, 100);
+			}
+		});
+	},
+	methods: {
+		onScheduleChange(e) {
+			this.duration = e.detail.duration;
+			if (!this.progressDrag) {
+				this.schedule = (parseFloat(e.detail.currentTime) / e.detail.duration) * 750;
+			}
+		},
+		onPlay() {
+			if (this.playState == 2000) {
+				this.videoCtx.pause();
+				this.playState = 1000;
+			} else if (this.playState == 1000) {
+				this.videoCtx.play();
+				this.playState = 2000;
+			} else if (this.playState == 3000) {
+				this.videoCtx.play();
+				this.playState = 2000;
+			}
+		},
+		// 视频进入缓冲中
+		onWaiting() {
+			this.playState = 3000;
+		},
+		onError(e){
+			console.log("视频播放出错", e);
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+@import '@/static/mixin.scss';
+.video_box {
+	position: relative;
+	width: 750rpx;
+}
+.bottom_mask {
+	position: absolute;
+	left: 0rpx;
+	bottom: 0rpx;
+	right: 0rpx;
+	height: 300rpx;
+	width: 750rpx;
+	background-image: linear-gradient(to bottom, rgba(0,0,0,0) , rgba(0,0,0,0.7)); 
+}
+.video_file {
+	width: 750rpx;
+}
+.play_schedule {
+	position: absolute;
+	bottom: 6rpx;
+	left: 0;
+	height: 16rpx;
+	width: 750rpx;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+}
+.schedule_bg {
+	position: absolute;
+	top: 7rpx;
+	left: 0;
+	right: 0;
+	height: 2rpx;
+	background-color: rgba(255, 255, 255, 0.3);
+}
+.schedule {
+	background-color: #fff;
+	height: 2rpx;
+	position: relative;
+}
+.progress_drag_dot {
+	width: 16rpx;
+	height: 16rpx;
+	border-radius: 50%;
+	background-color: #fff;
+}
+.play_btn {
+	position: absolute;
+	top: 50%;
+	left: 45%;
+	right: 0;
+	bottom: 0;
+	justify-content: center;
+	align-items: center;
+}
+.icon_play {
+	width: 90rpx;
+	height: 90rpx;
+}
+</style>