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 是否开启调试模式
相关推荐
微三云-轩3 分钟前
区块链:重构企业数字化的信任核心与创新动力
人工智能·小程序·区块链·生活·我店
狗头大军之江苏分军12 分钟前
iPhone 17 vs iPhone 17 Pro:到底差在哪?买前别被忽悠了
前端
小林coding12 分钟前
再也不怕面试了!程序员 AI 面试练习神器终于上线了
前端·后端·面试
文心快码BaiduComate25 分钟前
WAVE SUMMIT深度学习开发者大会2025举行 文心大模型X1.1发布
前端·后端·程序员
babytiger25 分钟前
python 通过selenium调用chrome浏览器
前端·chrome
passer98131 分钟前
基于webpack的场景解决
前端·webpack
奶昔不会射手44 分钟前
css3之grid布局
前端·css·css3
举个栗子dhy1 小时前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
Coding_Doggy1 小时前
苍穹外卖前端Day1 | vue基础、Axios、路由vue-router、状态管理vuex、TypeScript
前端