canvasScreen/pages/show/show2.vue

<template>
	<view class="main_container">
		<view class="screen-swiper-box">
				<swiper :hidden="autoplay" class="screen-swiper" indicator-dots="true" circular="true" :autoplay="!autoplay"
					indicator-active-color="#71C1F6" indicator-color="#ffffff" interval="3000" duration="500">
					<swiper-item>
						<image class="swiperImage" :src="pictureUrl" mode="scaleToFill"></image>
					</swiper-item>
					<swiper-item>
						<image class="swiperImage" :src="videoPicture" @click="showVideo" mode="scaleToFill"></image>
					</swiper-item>
				</swiper>
				<view :hidden="!autoplay" class="video">
					<video class="MyVideo" id="myVideo" :src="videoUrl" objectFit="cover" @play="BoFang()" @pause="ZanTing()"
						controls="true">
						<cover-image class="videoClose" @click="colseVideo()"
							src="https://i-1-lanrentuku.qqxzb-img.com/2020/11/20/7ab68fc9-e126-47da-bcf2-7dd7a3b9f540.jpg?imageView2/2/w/1024/">
						</cover-image>
						<!-- 添加一个覆盖在视频上的关闭按钮cover-image -->
					</video>
				</view>
			</view>

		<view class="show-audio"></view>
		<view style="position:absolute; bottom:55.55rpx; left: 69.44rpx; color: #fff; z-index: 99999;">{{infoTxt}}--{{linkUrl}}--{{ audioName }}</view>
		

		<!-- <view v-if="!deviceInfoShow" class="local-data">
			<text class="title">欢迎使用数字新视窗</text>
			<view class="data-info">设备ID : 123456789</view>
			<view class="data-info">设备账号 : 123456789</view>
			<view class="data-info">设备名称 : CVBBN2</view>
			<view class="count-down" @click="deviceInfoShow=true">{{ count }}</view>
		</view> -->
	</view>
</template>

<script>
import utils from '@/utils/common.js';
import one from './show2.js';
let innerAudioContext = uni.createInnerAudioContext();
export default {
	components: {},
	data() {
		return {
			// 已登录情况显示6S得设备信息
			count: 6,
			deviceInfoShow: false,
			autoplay: false,
			// 素材
			materialsCont: [],
			show_materials: [],
			contentIndex: 0,
			itemIndex: 0,
			linkUrl: '',
			timer: null,
			duration: null,
			audioSrc: null,
			audioName: null,
			itemLength: [],
			flagIndex: 0,
			infoTxt:'',
			voicePlayer: null,
			videoPicture: 'https://desk-fd.zol-img.com.cn/t_s720x360c5/g6/M00/0B/06/ChMkKmFBixKIYQSCAAJVqqciWmYAATuTwFJgJkAAlXC803.jpg',
							pictureUrl: 'https://img-baofun.zhhainiao.com/market/133/2366564fa6b83158208eb3181752a8d6_preview.jpg',
							videoUrl: 'https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4',
						
		};
	},
	onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
	onLoad() {
		const _this = this;
		let result = one.data.data;
		this.materialsCont = result;
		this.materialsCont.map(item => {
			this.itemLength = this.itemLength.concat(item.show_materials.length);
			this.show_materials = this.show_materials.concat(item.show_materials);
		});
		// 初始化
		this.changIndex();
	},
	created() {
		this.atuo();
	},
	mounted() {
		// this.countdown();
		this.changeMaterial();
		this.voicePlayer.play();
	},
	methods: {
		// 轮播图事件
		showVideo() {
			this.autoplay = true;
			this.videoContext.play();
		},
		colseVideo() {

			this.videoContext.pause();

			this.autoplay = false;
		},
		BoFang() {
			this.videoContext.play();
		},
		ZanTing() {
			this.videoContext.pause();
		},
		swiperChange(current, source){
				// 切换如果不是视频位置 暂停视频
			console.log(current.target.current)
				if(current.target.current == 0){
				//this.player.seek(0)
				this.player.play()
				//this.showFullVideo=true;
				}else{
				this.player.pause()
				//this.player.stop()
				//this.showFullVideo=false;
						
				}
		},
		changeMaterial() {
			const _this = this;
			clearInterval(_this.timer);
			_this.timer = setInterval(() => {
				_this.duration -= 1;
				if (_this.duration == 0) {
					_this.itemIndex++;
					_this.flagIndex++;
					this.changIndex();
				}
			}, 1000);
		},
		changIndex() {
			const _this = this;
			if (_this.itemIndex == this.show_materials.length) {
				// clearInterval(_this.timer);
				this.itemIndex = 0;
				this.flagIndex = 0;
				this.contentIndex = 0;
				innerAudioContext.stop();
			}
			_this.duration = this.show_materials[this.itemIndex].duration;
			_this.linkUrl = this.show_materials[this.itemIndex].deposit_url;
			if (this.show_materials[this.itemIndex].bgm_url) {
				_this.audioSrc = '../../static/source/' + this.show_materials[this.itemIndex].bgm_url;
				_this.audioName = this.show_materials[this.itemIndex].bgm_name;
			} else {
				if (this.contentIndex == this.itemLength.length) {
					this.flagIndex = 0;
					this.contentIndex = 0;
				}else{
					if (this.flagIndex == this.itemLength[this.contentIndex]) {
						this.flagIndex = 0;
						this.contentIndex++;
					}
				}
				if (this.materialsCont[this.contentIndex].bgm_main) {
					this.audioSrc = '../../static/source/' + this.materialsCont[this.contentIndex].bgm_main;
					this.audioName = this.materialsCont[this.contentIndex].bgm_name;
				}
			}
			// this.playVoice(this.audioSrc);
			if (this.show_materials[this.itemIndex].material_type == 1) {
				innerAudioContext.stop();
			}
		},
		videoPlayEnd() {
			this.itemIndex++;
			this.flagIndex++;
			this.changIndex();
		},
		playVoice(src) {
			if (innerAudioContext != undefined) {
				innerAudioContext.stop();
			}
			innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.stop();
			innerAudioContext.src = src;
			innerAudioContext.autoplay = true;
			innerAudioContext.onPlay(() => {
				this.infoTxt = ''
				this.infoTxt = '开始播放'
				console.log('开始播放');
			});
			innerAudioContext.onError(res => {
				console.log(res.errMsg);
				console.log(res.errCode);
				innerAudioContext.stop();
			});
			innerAudioContext.onPause(() => {
				//暂停监听
				this.infoTxt = '暂停'
				console.log('暂停');
				// innerAudioContext.stop();
			});
			innerAudioContext.onEnded(() => {
				// 自然播放结束监听也需要更改isPause 开关状态
				this.infoTxt = '音频自然播放结束事件'
				console.log('音频自然播放结束事件');
				innerAudioContext.stop();
			});
		},
		atuo() {
			this.autoplay = true;
		},
		countdown() {
			this.count = 6;
			const timer = setInterval(() => {
				this.count -= 1;
				if (this.count < 1) {
					clearInterval(timer);
					this.deviceInfoShow = true;
					console.log('倒计时结束');
				}
			}, 1000);
		}
	}
};
</script>
<!-- 
<style scoped>
.main_container {
	position: relative;
	overflow: hidden;
	background: #000;
}
.show-item {
	/* width: 100%;
	height: 100vh; */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.show-item .show-img {
	width: 100%;
	height: 100vh;
	object-fit: cover;
}
.show-item uni-video {
	width: 100%;
}
.show-video {
	width: 100%;
	height: 100vh;
}
.show-audio {
	position: fixed;
	bottom: 79.16rpx;
	right: 46.52rpx;
	width: 159.72rpx;
	height: 152.08rpx;
	background: url(~@/static/images/an-yy.png) no-repeat;
	background-size: cover;
}
.show-audio uni-image {
	width: 159.72rpx;
	height: 152.08rpx;
}
.local-data {
	position: absolute;
	left: 50%;
	top: 50%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 625rpx;
	height: 555.55rpx;
	transform: translate(-50%, -50%);
	font-size: 27.77rpx;
	color: #333;
	border-radius: 27.77rpx;
	background: rgba(255, 255, 255, 0.85);
}
.title {
	margin-bottom: 32.63rpx;
	font-size: 56.94rpx;
	text-align: center;
}
.data-info {
	padding: 0 83.33rpx;
	margin-bottom: 32.63rpx;
}
.count-down {
	position: absolute;
	right: 34.72rpx;
	top: 27.77rpx;
	width: 48.61rpx;
	height: 48.61rpx;
	font-size: 30.55rpx;
	text-align: center;
	line-height: 48.61rpx;
	border: 1px solid #333;
	border-radius: 50%;
}
</style> -->
<style lang="scss" scoped>
	.screen-swiper-box {
		position: absolute;
		width: 100%;
		height: 350rpx;
		.video {
			height: 100%;
			width: 100%;
			position: absolute;

			.MyVideo {
				width: 100%;
				position: absolute;
				height: 100%;

				.videoClose {
					height: 40rpx;
					width: 40rpx;
					position: absolute;
					right: -1rpx;
					z-index: 99999;
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}
			}


		}

		.screen-swiper {

			width: 100%;
			position: absolute;
			height: 100%;

			.swiperImage {
				width: 100%;
				position: absolute;
				height: 100%;
			}


		}
	}
</style>