canvasScreen/pages/show/show.vue

<template>
	<view class="main_container">
		<view class="show-content">
			<view v-for="(item, index) in show_materials" :key="index" :class="['show-item', item.material_type == 1 && itemIndex == index ? 'show-video' : '']">
				<image :class="['show-img','animate__animated', item.material_type == 0 ? item.effect : '']" v-show="item.material_type == 0 && itemIndex == index" :src="linkUrl"></image>
				<video v-if="item.material_type == 1 && itemIndex == index" :src="linkUrl" :autoplay="autoplay" controls object-fit="fill" @ended="videoPlayEnd"></video>
			</view>
		</view>
		<view class="show-audio"></view>
		<view style="position:absolute; bottom: 6.94rpx; color: #fff; z-index: 99999;">{{ 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>
// https://qiniu.aiyxlib.com/1608277325000.mp4
// https://qiniu.aiyxlib.com/1634285181000.mp4
// https://qiniu.aiyxlib.com/yuekan-BGM19.mp3
// https://qiniu.aiyxlib.com/yuekan-BGM31.mp3
// https://qiniu.aiyxlib.com/yuekan-BGM27.mp3
// https://qiniu.aiyxlib.com/yuekan-BGM41-f.mp3
import utils from '@/utils/common.js';
import one from './show.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: []
		};
	},
	onLoad() {
		let result = one.data.data;
		this.materialsCont = result;
		console.log(this.materialsCont.length);
		this.materialsCont.map(item => {
			this.itemLength = this.itemLength.concat(item.show_materials.length);
			this.show_materials = this.show_materials.concat(item.show_materials);
		});
		console.log(this.itemLength);
		// 初始化
		this.linkUrl = this.show_materials[this.itemIndex].deposit_url;
		this.duration = this.show_materials[this.itemIndex].duration;
		if (this.show_materials[this.itemIndex].material_type != 1) {
			if (this.show_materials[this.itemIndex].bgm_url) {
				this.audioSrc = this.show_materials[this.itemIndex].bgm_url;
				this.audioName = this.show_materials[this.itemIndex].bgm_name;
			} else {
				if (this.materialsCont[this.contentIndex].bgm_main) {
					this.audioSrc = this.materialsCont[this.contentIndex].bgm_main;
					this.audioName = this.materialsCont[this.contentIndex].bgm_name;
				}
			}
			this.playVoice(this.audioSrc)
		}else{
			innerAudioContext.stop()
		}
	},
	created() {
		this.atuo();
	},
	mounted() {
		// this.countdown();
		this.changeImg();
	},
	methods: {
		playVoice(src) {
			if(innerAudioContext  != undefined){
				innerAudioContext.stop()
			}
			innerAudioContext = uni.createInnerAudioContext()
			innerAudioContext.stop();
			innerAudioContext.src = src;
			innerAudioContext.autoplay = true;
			innerAudioContext.onPlay(() => {
				console.log('开始播放');
			});
			innerAudioContext.onError(res => {
				console.log(res.errMsg);
				console.log(res.errCode);
				innerAudioContext.stop()
			});
			innerAudioContext.onPause(() => {//暂停监听
			  console.log('暂停');
				innerAudioContext.stop()
			});
			innerAudioContext.onEnded(() => {// 自然播放结束监听也需要更改isPause 开关状态
			  console.log('音频自然播放结束事件');
				innerAudioContext.stop()
			});
		},
		changeImg() {
			const _this = this;
			clearInterval(_this.timer);
			_this.timer = setInterval(() => {
				_this.duration -= 1;
				if (_this.duration == 0) {
					_this.itemIndex++;
					if (_this.itemIndex == this.show_materials.length) {
						// clearInterval(_this.timer);
						this.itemIndex = 0
						this.contentIndex = 0
						_this.duration = this.show_materials[this.itemIndex].duration;
						_this.linkUrl = this.show_materials[this.itemIndex].deposit_url;
						if (this.show_materials[this.itemIndex].material_type != 1) {
							if (this.show_materials[this.itemIndex].bgm_url) {
								_this.audioSrc = this.show_materials[this.itemIndex].bgm_url;
								_this.audioName = this.show_materials[this.itemIndex].bgm_name;
							} else {
								if (this.materialsCont[this.contentIndex].bgm_main) {
									this.audioSrc = this.materialsCont[this.contentIndex].bgm_main;
									this.audioName = this.materialsCont[this.contentIndex].bgm_name;
								}
							}
							this.playVoice(this.audioSrc)
						}else{
							innerAudioContext.stop()
						}
					} else {
						_this.duration = this.show_materials[this.itemIndex].duration;
						_this.linkUrl = this.show_materials[this.itemIndex].deposit_url;
						if (this.show_materials[this.itemIndex].material_type != 1) {
							if (this.show_materials[this.itemIndex].bgm_url) {
								_this.audioSrc = this.show_materials[this.itemIndex].bgm_url;
								_this.audioName = this.show_materials[this.itemIndex].bgm_name;
							} else {
								const result = this.itemLength.some(item => {
									return this.itemIndex == item;
								});
								console.log('result',result)
								if (result) {
									this.contentIndex++;
								}
								if (this.materialsCont[this.contentIndex].bgm_main) {
									this.audioSrc = this.materialsCont[this.contentIndex].bgm_main;
									this.audioName = this.materialsCont[this.contentIndex].bgm_name;
								}
							}
							this.playVoice(this.audioSrc)
						}else{
							innerAudioContext.stop()
						}
					}
				}
			}, 1000);
		},
		videoPlayEnd() {
			this.itemIndex = this.itemIndex + 1;
			if (this.itemIndex == this.show_materials.length) {
				// clearInterval(this.timer);
				this.itemIndex = -1
				innerAudioContext.stop()
			} else {
				this.duration = this.show_materials[this.itemIndex].duration;
				this.linkUrl = this.show_materials[this.itemIndex].deposit_url;
				if (this.show_materials[this.itemIndex].material_type != 1) {
					if (this.show_materials[this.itemIndex].bgm_url) {
						this.audioSrc = this.show_materials[this.itemIndex].bgm_url;
						this.audioName = this.show_materials[this.itemIndex].bgm_name;
					} else {
						const result = this.itemLength.some(item => {
							return this.itemIndex == item;
						});
						if (result) {
							this.contentIndex++;
						}
						if (this.materialsCont[this.contentIndex].bgm_main) {
							this.audioSrc = this.materialsCont[this.contentIndex].bgm_main;
							this.audioName = this.materialsCont[this.contentIndex].bgm_name;
						}
					}
					this.playVoice(this.audioSrc)
				}else{
					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>