jxzhp/pages/index/videoPlayer.vue

<template>
	<view class="videoPlayer">

		<video :id="'myVideo'+current" @error="showErr" @loadedmetadata='loaddata' class="video" :controls="true"
			style="object-fit: cover !important;" :src="video.src" @ended="next" :show-fullscreen-btn="false"
			:poster="video.poster" :muted="current == 0 && ismuted" :autoplay="current == 0" show-mute-btn
			@play="openS"></video>
		<view class="video err" v-if="is_err&&load=='erro'">
			当前视频链接加载失败，请检查网络设置
		</view>
		<view class="video err" v-if="is_err&&load=='loding'">
			加载中...
		</view>
	</view>
</template>

<script>
	export default {
		props: ['video', 'current'],
		name: "videoPlayer",
		data() {
			return {
				play: false,
				ismuted: true,
				videoContext: '',
				is_err: false,
				load:"loding",//未加载数据
			};
		},
		onReady() {
			this.videoContext = uni.createVideoContext("myVideo", this)
		},
		mounted() {},
		methods: {
			click() {
				if (this.play === false) {
					this.playthis()
				} else {
					this.pauseVideo()
				}
			},
			playVideo(cu) {
				this.videoContext = uni.createVideoContext("myVideo" + cu, this);
				// console.log(this.play === false && this.is_err == false, "this.play === false");
				if (this.play === false) {
					this.videoContext.seek(0)
					try {
						this.videoContext.play()
						// console.log(cu,this.current,'cu');
					} catch (e) {
						console.log(e, 'err');
					}
					this.play = true
				}
			},
			openS() {
				console.log('播放成功')
				this.ismuted = false
				this.is_err = false
				this.$emit('playVideoSuccess');
			},
			pauseVideo() {
				if (this.play === true) {
					this.videoContext.pause()
					this.play = false
				}
			},
			playthis() {
				let that = this
				this.videoContext = uni.createVideoContext("myVideo", this)
				if (this.play === false) {
					this.videoContext.play()
					this.play = true
				}
			},
			next() {
				this.play = false
				this.$emit('goNext');
			},
			loaddata(){
				this.load='success';
				this.$emit('playVideoSuccess');
			},
			showErr(err) {
				console.log(err, '报错',this.current)
				const that = this;
				if (that.load!=='success') {
					that.is_err = true
					that.load='erro'
					that.$emit('errorVideo');
				}
			}
		}
	}
</script>
<style lang="scss">
	$bl: 10.8;

	.videoPlayer {
		width: (1080vw/$bl);
		height: (540vw/$bl);
		position: relative;
	}

	.video {
		width: 100%;
		height: 100%;

	}

	.err {
		text-align: center;
		position: absolute;

		width: (1080vw/$bl);
		height: (540vw/$bl);
		font-size: (32vw/$bl);
		top: 0;
		// letter-spacing: ;
		left: 0;
		z-index: 99;
		line-height: (540vw/$bl);
		color: #fff;
		background-color: #999;
	}

	.video:focus {
		outline: none;
	}

	/deep/ .uni-video-video {
		object-fit: cover !important;
	}
</style>