uniapp开发小程序使用live-player添加控件

<template>
	<view class="content">
		<view class="player-content">
			<live-player id="livePlayer" class="live-player" catchtouchmove :src="currentUrl" 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">进入全屏</text>
							<text class="iconfont" v-else>&#xe67e;</text>
						</view>
						<view class="cruise" @tap.stop="handleCruise()" v-if="streamIndex == 2">
							<text class="iconfont">退出全屏</text>
						</view>
					</view>
				</view>
			</live-player>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPlaySource: false, //是否有播放源
				isVideoLive: false, //是否是直播
				isAutoplay: true, //是否自动播放
				videoMsg: '', //video消息
				currentUrl: '', //播放路径
				showControlbar: true,
				timer:null,
			}
		},
		watch: {
			showControlbar(val, oldVal) {
				if(val){
					 this.timer = setTimeout(()=>{
						this.showControlbar = false
					},5000)
				}else{
					clearTimeout(this.timer);
				}
			}
		},
		onLoad() {
			this.playerCtx = uni.createLivePlayerContext('livePlayer');
		},
		created() {
			this.getLiveList()  //视频流列表
			setTimeout(()=>{
				this.showControlbar = false
			},10000)
		},

		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>

控制台可能会报黄色警告提示 background-mute 已经过时,删掉即可.

属性:

属性名 类型 默认值 说明
src String - 用于音视频下行的播放 URL,支持 RTMP、FLV 等协议
mode String live 模式。live(直播),RTC(实时通话,该模式时延更低)
autoplay Boolean false 是否自动播放
muted Boolean false 是否静音
orientation String vertical vertical(垂直),horizontal(水平)
object-fit String contain 填充模式,可选值有 contain(图像长边填满屏幕,短边区域会被填充⿊⾊)fillCrop(图像铺满屏幕,超出显示区域的部分将被截掉)
background-mute Boolean false 当微信切到后台时,是否关闭播放声音
min-cache Number 1 最小缓冲延迟, 单位:秒
max-cache Number 3 最大缓冲延迟, 单位:秒
sound-mode String speaker 声音输出方式。speaker(扬声器),ear(听筒)
auto-pause-if-navigate Boolean true 当跳转到本小程序的其他页面时,是否自动暂停本页面的实时音视频播放
auto-pause-if-open-native Boolean true 当跳转到其它微信原生页面时,是否自动暂停本页面的实时音视频播放
picture-in-picture-mode string/Array - 设置小窗模式: push, pop 或通过数组形式设置多种模式(如: ["push", "pop"])(不常用)
bindstatechange EventHandler - 用于指定一个 javascript 函数来接受播放器事件.detail = {code}
bindfullscreenchange EventHandler - 用于指定一个 javascript 函数来接受全屏变化事件,detail = {direction, fullScreen}
bindnetstatus EventHandler - 网络状态通知,detail = {info}
bindaudiovolumenotify EventHandler - 播放音量大小通知,detail = {}(不常用)
debug Boolean false 是否开启调试模式
相关推荐
susu10830189112 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾3 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu5 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym10 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫11 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫15 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat16 分钟前
前端性能优化2
前端
丁总学Java35 分钟前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app