canvasScreen/pages/show/show.vue

<template>
	<view class="main_container">
		<view class="show-content" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
			<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"
					mode="aspectFill"
				></image>
				<video
					:id="'video' + index"
					v-if="item.material_type == 1 && itemIndex == index"
					:src="linkUrl"
					:controls="false"
					:autoplay="autoplay"
					:enable-progress-gesture="false"
					:enable-play-gesture="false"
					object-fit="contain"
					show-center-play-btn="false"
					@play="playEvent"
					@ended="videoPlayEnd"
					@waiting="waitingVideo"
					@loadeddata="loading"
					@timeupdate="timeUpdate"
					initial-time="initial_time"
				>
				<!-- <cover-view
					style="z-index:99;position: fixed;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
					<image style="width: 40px;height: 40px;"></image>
				</cover-view> -->
				</video>
			</view>
		</view>
		<!-- <swiper @change="changeMaterial()"  style="height: 100%;">
				<swiper-item v-for="(item, index) in show_materials" :key="index" :class="['show-item', item.material_type == 1 && itemIndex == index ? 'show-video' : '']">
					<view class="item"  v-if="item.material_type == 1 && itemIndex == index">
						<video id="myVideo" ref="myVideo" 
							:src="linkUrl" :autoplay="autoplay" :controls="false" :enable-progress-gesture="false" object-fit="contain" @ended="videoPlayEnd"></video>
						<cover-view
							style="z-index:99;position: fixed;width:100%;height:100%;top:0;left:0;display:flex; justify-content:center; align-items:center;">
							<image style="width: 40px;height: 40px;"></image>
						</cover-view>
					</view>
					<view class="item" v-if="item.material_type == 0 && itemIndex == index">
							<image  :src="linkUrl" :class="['show-img', 'animate__animated', item.material_type == 0 ? item.effect:'']"></image>
					</view>
				</swiper-item>
		</swiper> -->
		<view class="show-audio"></view>
		<view style="position:absolute; bottom:55.55rpx; left: 69.44rpx; color: #fff; z-index: 99999;">{{ infoTxt }}--{{ 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 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: '',
			video_real_time: 0,
			nitial_time: '',
			startY: 0,
			startX: 0,
			isAutoSwitch: true,
			moveX: 0, //滑动的x轴距离
			moveY: 0, //滑动的y轴距离
			like_state: 0 //-1：左滑，0：没滑动，1：右滑
		};
	},
	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();
	},
	onReady: function(res) {
		const videoId = 'video'+this.itemIndex
		this.videoCtx = uni.createVideoContext(videoId)
	},
	created() {
		this.auto();
	},
	mounted() {
		// this.countdown();
		this.changeMaterial();
	},
	methods: {
		// 素材切换
		touchStart(event) {
			this.startX = event.touches[0].pageX;
			this.startY = event.touches[0].pageY;
			// console.log('开始触摸：', this.startX, this.startY);
		},
		touchMove(event) {
			let currentX = event.touches[0].pageX;
			let currentY = event.touches[0].pageY;
			let moveX = currentX - this.startX;
			let moveY = currentY - this.startY;
			let text = '';
			let state = 0; //-1：左滑，0：没滑动，1：右滑
			// //左右方向滑动
			if (Math.abs(moveX) > Math.abs(moveY)) {
				if (moveX < -10) {
					text = '左滑';
					state = 1;
				} else if (moveX > 10) {
					text = '右滑';
					state = -1;
				}
			} else {
				//上下方向滑动
				if (moveY < 0) {
					text = '上滑';
					state = -2;
				} else if (moveY > 0) {
					text = '下滑';
					state = 2;
				}
			}
			this.like_state = state;
			this.moveX = moveX;
			this.moveY = moveY;
			// console.log('开始滑动：', this.moveX, this.moveY, this.like_state);
		},
		touchEnd(event) {
			// console.log(`移动距离:${Math.abs(this.moveX)}`);
			// if (Math.abs(this.moveX) > 60 ) {
			// 		if (this.like_state == 1) {
			// 			this.itemIndex++;
			// 			this.flagIndex++;
			// 			this.isAutoSwitch = true;
			// 		} else if (this.like_state == -1) {
			// 			this.itemIndex--;
			// 			this.flagIndex--;
			// 			this.isAutoSwitch = false;
			// 		}
			// 		this.changIndex();
			// }
			if (Math.abs(this.moveY) > 60) {
				if (this.like_state == -2) {
					this.itemIndex++;
					this.flagIndex++;
					this.isAutoSwitch = true;
				} else if (this.like_state == 2) {
					this.itemIndex--;
					this.flagIndex--;
					this.isAutoSwitch = false;
				}
				this.changIndex();
			}
		},
		// 自动切换
		changeMaterial() {
			const _this = this;
			clearInterval(_this.timer);
			_this.timer = setInterval(() => {
				_this.duration -= 1;
				if (_this.duration == 0) {
					_this.itemIndex++;
					_this.flagIndex++;
					this.isAutoSwitch = true;
					this.changIndex();
				}
			}, 1000);
		},
		changIndex() {
			const _this = this;
			innerAudioContext.destroy();
			_this.linkUrl = '';
			console.log(this.itemLength)
			// 资源素材加载到最后一张时 - 下一页
			if (_this.itemIndex == this.show_materials.length) {
				// clearInterval(_this.timer);
				console.log('最后一页啦')
				this.itemIndex = 0;
				this.flagIndex = 0;
				this.contentIndex = 0;
			}
			// 资源加载到第一张时 - 上一页
			if (this.itemIndex == -1) {
				this.itemIndex = this.show_materials.length - 1;
				this.contentIndex = this.itemLength.length - 1;
				this.flagIndex = this.itemLength[this.contentIndex];
			}
			if (this.flagIndex == -1) {
				// if(this.contentIndex == -1){
				// 	this.contentIndex = this.itemLength.length - 1;
				// }
				// console.log('itemIndex',this.itemIndex)
				// console.log('flagIndex',this.flagIndex)
				// console.log('contentIndex',this.contentIndex)
				// console.log(this.materialsCont[this.contentIndex])
				this.contentIndex--;
				this.flagIndex = this.itemLength[this.contentIndex];
			}
			// 图片播放时间
			_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 = 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.isAutoSwitch) {
						if (this.flagIndex == this.itemLength[this.contentIndex]) {
							this.flagIndex = 0;
							this.contentIndex++;
							if (this.contentIndex == this.itemLength.length || _this.itemIndex == this.show_materials.length) {
								this.contentIndex = this.itemLength.length-1;
								this.flagIndex = this.itemLength[this.contentIndex];
							}
						}
					}
				}
				// 图片无自带 - 再判断是否有BGM - main
				if (this.materialsCont[this.contentIndex].bgm_main) {
					this.audioSrc = this.materialsCont[this.contentIndex].bgm_main;
					this.audioName = this.materialsCont[this.contentIndex].bgm_name;
				}
			}
			// 当前资源是 - 视频 - 时，即销毁音频（防止干扰）
			if (this.show_materials[this.itemIndex].material_type == 1) {
				innerAudioContext.destroy()
				innerAudioContext.src = ''
			}
			// 销毁-创建音频-播放音频
			innerAudioContext = uni.createInnerAudioContext();
			this.playVoice(this.audioSrc);
		},
		// 视频
		videoPlayEnd() {
			console.log('end-video')
			this.itemIndex++;
			this.flagIndex++;
			this.changIndex();
		},
		auto() {
			setTimeout(()=>{
				this.autoplay = true;
			},500)
		},
		playEvent(e) {
			console.log("play_video")
			let currentId = e.target.id; // 获取当前视频id
			this.videoCtx = uni.createVideoContext(currentId);
			innerAudioContext.destroy()
		},
		loading(){
			console.log('play_loading')
		},
		waitingVideo(){
			console.log('waiting-video')
			this.videoCtx.pause()
		},
		timeupdateEvent(event) {
		  console.log('timeupdateEvent')
		},
		// 禁止拖动进度条快进
		timeUpdate(e) {
			var isReady = 1; // 是否开启可以视频快进 1 禁止开启
			//跳转到指定播放位置 initial-time 时间为秒
			let that = this;
			//播放的总时长
			var duration = e.detail.duration;
			//实时播放进度 秒数
			var currentTime = parseInt(e.detail.currentTime);
			//当前视频进度
			// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位
			if (that.video_real_time == 0) {
				var jump_time = parseInt(that.initial_time) + parseInt(that.video_real_time);
			} else {
				var jump_time = parseInt(that.video_real_time);
			}
			if (isReady == 1) {
				if (currentTime > jump_time && currentTime - jump_time > 3) {
					let videoContext = uni.createVideoContext(e.target.id);
					uni.showToast({
						title: '未完整看完该视频，不能快进',
						icon: 'none',
						duration: 2000
					});
					videoContext.stop()
					videoContext.seek(0);
				}
			}
			that.video_real_time = currentTime; //实时播放进度
		},
		// 音频
		playVoice(src) {
			if (innerAudioContext != undefined) {
				innerAudioContext.stop();
			}
			innerAudioContext = uni.createInnerAudioContext();
			innerAudioContext.stop();
			innerAudioContext.src = src;
			innerAudioContext.autoplay = true;
			innerAudioContext.loop = true;
			innerAudioContext.onPlay(() => {
				this.infoTxt = '音频开始播放';
				// console.log('开始播放');
			});
			innerAudioContext.onError(res => {
				if(this.show_materials[this.itemIndex].material_type != 1){
					console.log(res.errMsg);
					console.log(res.errCode);
					innerAudioContext.destroy();
				}
				// innerAudioContext.stop();
			});
			innerAudioContext.onPause(function() {  
					console.log('onPause');
			});
			innerAudioContext.onStop(() => {
				this.infoTxt = '音频停止';
				// console.log('停止');
			});
			innerAudioContext.onEnded(() => {
				this.infoTxt = '音频自然播放结束事件';
				// console.log('音频自然播放结束事件');
			});
		},
		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 {
	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%;
	height: 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%;
}
.swiper {
	height: 100vh;
}
.item {
	width: 100%;
	height: 100%;
}
.mask {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	z-index: 999;
}
.controls-title {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.3);
	text-align: center;
	color: #ffffff;
	border: 10px solid #fff;
	z-index: 9999;
}
</style>