xingmingyi_applet/pagesA/broadcast/bdLook.vue

<template>
	<view class="content">
		<view class="player-content">
			<!-- <live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" /> -->
			<!-- #ifdef MP-WEIXIN -->
			<live-player
				id="livePlayer"
				class="live-player"
				catchtouchmove
				:src="sourceUrl"
				autoplay
				background-mute
				object-fit="contain"
				sound-mode="speaker"
				mode="live"
				@statechange="statechange"
				@error="error"
				@click="handleControlbar"
			>
				<view class="player-tool" :style="{ bottom: showControlbar ? '0' : '-60rpx' }">
					<view class="tools">
						<view class="full-screen" @tap.stop="handleFullScreen()">
							<!-- <text class="iconfont">&#xe824;</text>
							<text class="iconfont" v-else>&#xe67e;</text>
							 -->
							<u-icon v-if="!fullScreenFlag" name="setting"></u-icon>
							<u-icon name="setting-fill"></u-icon>
						</view>
						<view class="cruise" @tap.stop="handleCruise()" v-if="streamIndex == 2"><text class="iconfont">&#xe625;</text></view>
					</view>
				</view>
			</live-player>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			roomid: '', //获取直播间roomid
			isPlaySource: false, //是否有播放源
			isVideoLive: false, //是否是直播
			isAutoplay: true, //是否自动播放
			videoMsg: '', //video消息
			sourceUrl: 'https://domain/pull_stream"', //播放路径
			showControlbar: true,
			timer: null
		};
	},
	watch: {
		showControlbar(val, oldVal) {
			if (val) {
				this.timer = setTimeout(() => {
					this.showControlbar = false;
				}, 5000);
			} else {
				clearTimeout(this.timer);
			}
		}
	},
	onLoad(opt) {
		let item = JSON.parse(opt.item);
		this.roomid = item.roomid || '';
		console.log(JSON.parse(opt.item), item, this.roomid);
		this.getLiveList(); //视频流列表
		// #ifdef MP-WEIXIN
		this.playerCtx = uni.createLivePlayerContext('livePlayer');
		// #endif
	},
	created() {
		// #ifdef  MP-WEIXIN
		//自定义控制栏自动隐藏的实现
		setTimeout(() => {
			this.showControlbar = false;
		}, 10000);
		// #endif
	},
	methods: {
		statechange(e) {
			console.log('live-player code:', e.detail.code);
			let code = e.detail.code;
			if (code === 2001) {
				this.$api.toast('2001: 已经连接服务器');
			} else if (code === 2002) {
				this.$api.toast('2002: 已经连接 RTMP 服务器,开始拉流');
			} else if (code === 2003) {
				this.$api.toast('2003: 网络接收到首个视频数据包(IDR)');
			} else if (code === 2004) {
				this.$api.toast('2004: 视频播放开始');
			} else if (code === 2008) {
				this.$api.toast('解码器启动，如遇不播放或卡顿，请尝试重新播放', 3000);
			} else if (code === 2009) {
				console.warn('2009: 视频分辨率改变');
			} else if (code === 2101) {
				this.$api.toast('2101: 当前视频帧解码失败');
			} else if (code === 2102) {
				this.$api.toast('2102: 当前音频帧解码失败');
			} else if (code === 2103) {
				this.$api.toast('2103: 网络断连, 已启动自动重连');
			} else if (code === 2104) {
				this.$api.toast('2104: 网络来包不稳：可能是下行带宽不足，或由于主播端出流不均匀');
			} else if (code === 2105) {
				this.$api.toast('2105: 当前视频播放出现卡顿');
			} else if (code === 2106) {
				this.$api.toast('2106: 硬解启动失败，采用软解');
			} else if (code === 2107) {
				this.$api.toast('2107: 当前视频帧不连续，可能丢帧');
			} else if (code === 2108) {
				this.$api.toast('2108: 当前流硬解第一个I帧失败，SDK自动切软解');
			} else if (code === 3001) {
				this.$api.toast('3001: RTMP -DNS解析失败');
			} else if (code === 3002) {
				this.$api.toast('3002: RTMP服务器连接失败');
			} else if (code === 3003) {
				this.$api.toast('3003: RTMP服务器握手失败');
			} else if (code === 3005) {
				this.$api.toast('3005: RTMP 读/写失败，之后会发起网络重试');
			} else if (code === -2301) {
				this.$api.toast('-2301: 网络断连，且经多次重连抢救无效，更多重试请自行重启播放');
			} else if (code === -2302) {
				this.$api.toast('-2302: 获取加速拉流地址失败');
			}
		},
		error(e) {
			console.error('live-player error:', e.detail.errMsg);
		},
		handleControlbar() {
			this.showControlbar = !this.showControlbar;
		},
		getLiveList() {
			console.log(this.roomid);
			let val = this.roomid;
			this.$api
				.request('live/get_url', {
					roomid: val
				})
				.then(data => {
					console.log(data);
					console.log(this.roomid);
					if (data.code == 200) {
						this.sourceUrl = data.data.pushAddr;
					} else {
						this.$api.toast(data.msg);
					}
				});
		},
		// 巡航
		handleCruise() {
			// #ifdef  MP-WEIXIN
			uni.vibrateShort();
			// #endif
		},
		//全屏功能的实现
		handleFullScreen() {
			var that = this;
			if (!that.fullScreenFlag) {
				//全屏
				that.playerCtx.requestFullScreen({
					success: res => {
						that.fullScreenFlag = true;
						console.log('我要执行了');
					},
					fail: res => {
						console.log('fullscreen fail');
					},
					direction: 90
				});
			} else {
				//缩小
				that.playerCtx.exitFullScreen({
					success: res => {
						that.fullScreenFlag = false;
						console.log('我要执行了');
					},
					fail: res => {
						console.log('exit fullscreen success');
					}
				});
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	.player-content {
		position: relative;
		width: 100%;
		height: 100vh;
		display: flex;
		background-size: 100% 100%;

		.live-player {
			width: 100%;
			height: 100%;
			position: relative;
		}
	}
}
//播放器弹出工具
.player-tool {
	width: 100%;
	height: 60rpx;
	background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.6), transparent);
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: absolute;
	left: 0;
	padding: 0 45rpx;
	transition: all 0.3s;
	.tools {
		height: 100%;
		width: auto;
		display: flex;
		align-items: center;

		.full-screen {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.iconfont {
				color: #fff;
				font-weight: bold;
			}
		}

		.cruise {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 25rpx;

			.iconfont {
				color: #e45a3e;
				font-size: 45rpx;
			}
		}
	}
}
</style>