uniapp中使用live-player组件&&全屏功能的实现&&控制栏自动隐藏本篇主要介绍uniapp开发小程序时候用

什么是组件?

组件是视图层的基本组成单元。
组件是一个单独且可复用的功能模块的封装。每个组件，包括如下几个部分：以组件名称为标记的开始标签和结束标签、组件内容、组件属性、组件属性值。

关于live-player组件

live-player是实时音视频播放，也称直播拉流。使用live-player 组件需注意：如果发布到小程序，需要先通过各家小程序的审核。指定类目的小程序才能使用（微信小程序类目 (opens new window)、百度小程序类目 (opens new window)），审核通过后在各家小程序管理后台自助开通该组件权限。

App的实时音视频播放，不是使用 live-player，而是直接使用 video 组件。
H5 下可用 video 播放符合 HTML5 规范的流媒体，rtmp 等非 HTML5 标准的流媒体格式，仅在部分支持 flash 的国内手机浏览器上可播放。在 pc 浏览器上，需要安装 flash 插件才能播放 rtmp 等格式。
百度小程序 iOS 端不支持设置 orientation 属性；
微信小程序已废弃 background-mute 属性，默认为进入后台静音；
live-player 默认宽度 300px、高度 225px；
live-player 是原生组件，层级高于前端组件，请勿在 scroll-view、swiper、picker-view、movable-view 中使用
小程序下覆盖live-player需要使用cover-view。详见
live-player 组件相关 JS API：createLivePlayerContext
小程序平台使用live-player有审核限制，请注意参考各家文档。
App端使用直播，推荐nvue页面下用video组件，可避免复杂的层级问题和全屏覆盖问题。

实现背景及方式

为了在小程序中播放rtmp直播流，研究了下小程序的live-player控件，首先必须在小程序后台开通权限才可以播放视频,个人账号暂时没有权限,必须是公司账号,需要在小程序后台的服务类目设置相应的类目,具体类目可以看文档，设置好类目之后在开发中的接口设置中打开实时播放音视频流,这样你才能够看到视频。功能组件使用权限开通之后，其他不多说直接上代码：

<template>
	<view class="content">
		<view class="player-content">
			<!-- #ifdef MP-WEIXIN -->
			<live-player id="livePlayer" class="live-player" catchtouchmove :src="sourceUrl" autoplay
			 background-mute sound-mode="speaker" mode='RTC' @statechange="statechange" @click="handleControlbar">
				<view class="player-tool" :style="{bottom:(showControlbar?'0':'-60rpx')}">
					<view class="tools">
						<view class="full-screen" @tap.stop="handleFullScreen()">
							<text class="iconfont" v-if="!fullScreenFlag">&#xe824;</text>
							<text class="iconfont" v-else>&#xe67e;</text>
						</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 {
				isPlaySource: false, //是否有播放源
				isVideoLive: false, //是否是直播
				isAutoplay: true, //是否自动播放
				videoMsg: '', //video消息
				sourceUrl: '', //播放路径
				showControlbar: true,
				timer:null,
			}
		},
		watch: {
			showControlbar(val, oldVal) {
				if(val){
					 this.timer = setTimeout(()=>{
						this.showControlbar = false
					},5000)
				}else{
					clearTimeout(this.timer);
				}
			}
		},
		onLoad() {
			// #ifdef MP-WEIXIN
			this.playerCtx = uni.createLivePlayerContext('livePlayer');
			// #endif
		},
		created() {
			// #ifdef  MP-WEIXIN
			this.getLiveList()  //视频流列表
			//自定义控制栏自动隐藏的实现
			setTimeout(()=>{
				this.showControlbar = false
			},10000)
			// #endif
		},

		methods: {
			handleControlbar() {
				this.showControlbar = !this.showControlbar
			},
			getLiveList() {
				this.$api.livePage.getLiveList().then(res => {
					//业务逻辑
				}).catch(err => {
					console.log('err');
				});
			},
			// 巡航
			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: 450rpx;
			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, .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>

实现之后的效果如下图（图画面隐私问题知道那个意思就行）：在这里插入图片描述

在这里插入图片描述

以上就是除去业务逻辑数据的整个组件的代码，记录点如下：

<live-player id="livePlayer" class="live-player" catchtouchmove :src="sourceUrl" autoplay
			 background-mute sound-mode="speaker" mode='RTC' @statechange="statechange" @click="handleControlbar" />

1.组件live-player中加catchtouchmove为了解决全屏以及还原时下方会有黑色可滚动区域问题，其他参数参考文档说明

2.由于原生的live-player组件是没有控制栏的所以video播放器常见的暂停，全屏，音量等(这里也希望官方能支持，自定义真的很麻烦)，具体各个功能的实现可以参考文档说明，这里只对全屏功能做了处理。

3.关于自定义控制栏，状态栏悬浮在视频上方正常情况下应该使用cover-view，但是我还是使用的view发现也可以，如果又遇到不可以的将view换成cover-view包裹即可，可参考说明文档

4.由于控制栏是悬浮在视频层上的所以全屏事件的按钮使用重叠事件区分一下，把@click换成@click.stop或者@tap.stop，否则会发现点击无效

5.控制栏自动隐藏的实现，这里采用css+watch监听的方式去实现，应该还有更好的方法来实现

6.关于此文章介绍demo的示例代码也可直接复制进行测试调试使用，相关于uniapp中使用直播组件的介绍就先到这里

我正在参与掘金技术社区创作者签约计划招募活动，点击链接报名投稿。