视频直播类小程序遇到cover-view坑

在小程序中如何正确使用视频和直播组件

最近在开发小程序,使用的框架的uniapp,在使用的过程中遇到难以预约的鸿沟,最终得以解决,现在记录一下解决的过程

视频遇到的问题

问题就是视频的转码,以及转码后清晰度的切换

转码是后端在七牛云自动转码,在视频上传的时候前端是直传(暂未实现断点续传),视频会出现合集的情况,类似电视剧一样,转码之后,前端请求对应的接口,来获取当前视频所对应的转码地址

具体的key就是当前视频转码之后所对应的地址,直接拼接七牛云对应域名就可以播放

如何在原生组件video标签自定义控制栏

在小程序版本比较低的时候是使用cover-view和cover-image两个标签,这两标签存在很多不支持的css,以及很多不可描述的bug尽量减少使用
经过我苦心专研,发现普通的view标签就可以代替cover-view使用
参考如下:(设置了视频的播放有效时长)

<template>
	<view class="videobofang">
		<video
		v-if="!videoError"
		 class="videotag" 
		 id="myVideo" 
		 :src="videourl" 
		 @error="videoErrorCallback"  
		 autoplay="true" 
		 enable-play-gesture 
		 auto-pause-if-navigate 
		 vslide-gesture-in-fullscreen 
		 controls
		 object-fit="contain"
		 :initial-time="initialtime"
		 @play="play"
		 @pause="pause" 
		 @timeupdate="timeupdate" 
		 @fullscreenchange="fullscreenchange"
		 @controlstoggle="controlstoggle">
			<block v-if="fullscreen">
				<view v-if="superdefinition" class="definition" @click="Switching">
					{{titilename}}
				view>
				<view v-if="Switchingclarity" class="Switclarity" @tap.stop="Switchingclarity=false">
					<view class="articulation_box">
						<view v-for="(item,index) in qingxi" :key="item" class="" @tap.stop="intelligibility(item,index)">
							<view :class="intelligiindex==index?'articulation_active':'articulation_item'">{{item}}view>
						view>
					view>
				view>
			block>
		video>
		<view v-if="videoError" class="erroe">
			<view class="title">网络丢了，请检查网络设置view>
			<view class="reload_box">
				<button type="default" class="reload_btn">重新加载button>
			view>
		view>
	view>
template>

<script>
	let timer = null;
	export default {
		props:{
			src:{
				type:String
			},
			videoarticulalist:{
				type:Array
			},
			videoid:{
				type:String
			}
		},
		data() {
			return {
				videourl:"",
				titilename:"超清",
				fullscreen:false,//是否全屏
				Switchingclarity:false,//清晰度的显示隐藏
				// controls:true,//视频的控制栏
				qingxi:["超清 1080P","高清 720P","标清 360P"],
				intelligiindex:"",
				superdefinition:true,
				initialtime:0,
				videoError:false,//视频能否正常播放
				videotimeadd:false,
				newvideo:"",
			}
		},
		onReady(res) {
		},
		watch:{
			src(newdata){
				console.log(newdata)
				this.videourl=newdata
				this.videotimeadd=false
			},
			videoid(newdata){
				this.newvideo=newdata
			},
			videoarticulalist(newdata){
				console.log(newdata)
				this.videoarticulalist=newdata
				this.videoarticulalist.forEach(item=>{
					if(item.key.substring(0,2)=="BD" && item.code==0){
						item.name="超清"
					}
					if(item.key.substring(0,2)=="HD" && item.code==0){
						item.name="高清"
					}
					if(item.key.substring(0,2)=="SD" && item.code==0){
						item.name="标清"
					}
					return
				})
			},
		},
		created() {
			this.videourl=this.src
			this.newvideo=this.videoid
			console.log(this.videourl,"获取到的清晰度列表",this.newvideo)
			
			this.videoarticulalist.forEach(item=>{
				if(item.key.substring(0,2)=="BD" && item.code==0){
					item.name="超清"
				}
				if(item.key.substring(0,2)=="HD" && item.code==0){
					item.name="高清"
				}
				if(item.key.substring(0,2)=="SD" && item.code==0){
					item.name="标清"
				}
				return
			})
		},
		methods: {
			getaddtime(){
				
			},
			qinxidu(res){
				console.log(res)
			},
			intelligibility(res,index){ //清晰度切换事件
				this.intelligiindex=index
				this.Switchingclarity=false
				if(this.intelligiindex==0){
					this.titilename="超清"
					this.initialtime=this.endtime
				}
				if(this.intelligiindex==1){
					this.titilename="高清"
					this.initialtime=this.endtime
				}
				if(this.intelligiindex==2){
					this.titilename="标清"
					this.initialtime=this.endtime
				}
				console.log(this.videoarticulalist)
				this.videoarticulalist.forEach(item=>{
					if(this.titilename===item.name){
						this.videourl="http://qpe5vsy9a.hd-bkt.clouddn.com/"+item.key
						console.log('我是'+this.titilename,this.videourl)
						return
					}
				})
			},
			
			Switching(){ //点击显示清晰度的切换
				this.Switchingclarity=true
			},
			videoErrorCallback(e) { //视频播放失败事件
				this.videoError=true
				// console.log(e,"我是视频播放失败")
			 //    uni.showModal({
			 //        content: e.target.errMsg,
			 //        showCancel: false
			 //    })
			},
			play(e){ //视频开始事件
				timer = setInterval(this.timepiece,1000)
			},
			pause(e){ //视频暂停事件
				clearInterval(timer)
				if(this.endtime/this.alltime>0.2){
					console.log("我是观看有效时长") 
					if(!this.videotimeadd){
						this.$http({
							url:'/live/video/view/add',
							method:'POST',
							data:{ 
								id:this.newvideo
							}
						}).then(res=>{
							console.log(res)
							this.videotimeadd=true
						}).catch(err=>{
							this.$toast("我是失败的接口")
						})
					}
				}
			},
			timepiece(){ //有效时长
				this.timenum++;
			},
			timeupdate(e){ //获取当前视频的时长
				this.endtime=e.detail.currentTime //当前播放时长
				this.alltime=e.detail.duration //视频总时长
				
			},
			controlstoggle(res){
				this.superdefinition=res.detail.show
			},
			fullscreenchange(res){ //全屏变化事件
				console.log(res,"我是视频的全屏事件")
				if(res.detail.fullScreen==true){
					this.fullscreen=true
				}else{
					this.fullscreen=false
				}
			},
		}
	}
script>

<style lang="scss" scoped>
	.videobofang{
		position: fixed;
		// top: 422rpx;
		width: 100%;
		height: 422rpx;
	}
	.erroe{
		width: 100%;
		height:422rpx;
		background-color: #000;
		line-height:422rpx;
		text-align: center;
		color: #fff;
		.title{
			width: 100%;
			height: 40rpx;
		}
		.reload_box{
			width: 100%;
			height: 64rpx;
			display: block;
			.reload_btn{
				width:208rpx;
				text-align: center;
				background-color: #4A4A4A;
				margin: 6rpx 0;
				border-radius:38rpx;
				height: 64rpx;
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
	.videotag{
		position: relative;
		width:100%;
		height: 100%;
		.definition{
			position: absolute;
			top:36rpx;
			right: 50rpx;
			color: #fff;
			width:80rpx;
			text-align: center;
			height: 30rpx;
			line-height: 30rpx;
			padding: 8rpx 14rpx;
			border: 2rpx solid #fff;
			border-radius: 20rpx;
		}
		.Switclarity{
			position: absolute;
			width:100%;
			height:100%;
			top:0;
			right:0;
			background-color: rgba(0,0,0,0.7);
			.articulation_box{
				width: 100%;
				height: 100%;
				color: #fff;
				display: flex;
				align-items: center;
				justify-content:center;
				font-size: 32rpx;
				box-sizing: border-box;
				&:last-child{
					margin-right:0;
				}
				.articulation_active{
					color: #FA7F16;
					margin-right: 96rpx;	
					width: 216rpx;
					height: 112rpx;
					line-height: 112rpx;
					text-align: center;
					border-radius: 16rpx;
					border: 0.4px solid #FFFFFF;
				}
				.articulation_item{
					margin-right: 96rpx;
					width: 216rpx;
					height: 112rpx;
					line-height: 112rpx;
					text-align: center;
					border-radius: 16rpx;
					border:0.4px solid #FFFFFF;
				}
			}
		}
	}
	
style>

接下来就是直播了

因为最开始开发的就是直播,因为标签问题困扰了许久才结合小程序参悟出来使用view来修改控制栏
直播里面有评论区的展示,清晰度的切换,以及评论区的文字背景不透明度,字体颜色和显示的速度

<template>
	<view>
		<view :class="fullscreenble?'box_bgimg':'video-box'" >
			<live-player 
			ref='polyvLiveVideo'
			id="polyvLiveVideo"
			:class="fullscreenble?'box_bgimg':'vp-v'" 
			min-cache="1"
			max-cache="1" 
			@statechange="statechange" 
			@tap="showPlayControl"
			sound-mode="speaker"
			:src="srcilst" 
			autoplay="true" mode="live"
			object-fit="contain"
			@fullscreenchange="fullscreenchangemethod">
				
				<block v-if="!fullscreenble">
					
					<block v-if="show">
						<cover-view  class="iconimg" >
							<cover-image :src="playbackble?zanting:bofang" @tap.stop="playback" class="btniconimg">cover-image>
							<cover-image src="https://sjwechat.oss-cn-shanghai.aliyuncs.com/static/liveandvideo/qunaping.png" class="btniconimg" @tap.stop="fullscreen">cover-image>
							<cover-image src="https://sjwechat.oss-cn-shanghai.aliyuncs.com/static/liveandvideo/live2.png" class="backimg">cover-image>
						cover-view>
					block>
				block>
				<block v-if="fullscreenble">
					<view class="control" @tap.stop="showPlayControl">
						<view class="iconimgctop" v-if="show">
						<image class="tuichu" src="https://sjwechat.oss-cn-shanghai.aliyuncs.com/static/liveandvideo/tuichu.png" @tap.stop="quit">image>
						<image src="https://sjwechat.oss-cn-shanghai.aliyuncs.com/static/liveandvideo/live3.png" class="backimgc">image>
						view>
						<view v-if="slidescroll" class="slidescroll_box">
							<view class="scrollslide" @tap.stop="delslidescroll">
								<view class="Commentset">评论设置view>
								<view class="title_slider">不透明度view>
								<view class="scrollslide_box">
									<slider activeColor="#25A5FF" backgroundColor="#646160" value="numslider" @change="sliderChange" block-size="12" class="scrollslide_slide" @changing="sliderChanging" /><text class="numbaifen">{{numslider}}%text>
								view>
								<view class="title_slider">字体颜色view>
								<view class="scrollslide_box">
									<slider activeColor="#25A5FF" backgroundColor="#646160" max="100" @change="sliderstepChange" @changing="sliderstepChanging" step="50" block-size="12"  class="scrollslide_slide" /><text class="numbaifen">{{commentyanse}}text>
								view>
								<view class="title_slider">评论速度view>
								<view class="scrollslide_box">
									<slider activeColor="#25A5FF" backgroundColor="#646160" value="" max="400" @change="sliderspeedChange" @changing="slispeedChanging" step="100" block-size="12" class="scrollslide_slide"/><text class="numbaifen">{{commentspeed}}text>
								view>
							view>
						view>
						<view v-if="Switchingclarity" class="superdef_box"> 
							<view class="Switclarity" @tap.stop="Switchingclarity=false">
								<view class="articulation_box">
									<view v-for="(item,index) in qingxi" :key="item" class="" @tap.stop="intelligibility(index)">
										<view :class="intelligiindex==index?'articulation_active':'articulation_item'" >{{item}}view>
									view>
								view>
							view>
						view>
						<view v-if="comment" class="chatlist_box">
							<scroll-view  scroll-y="true" class="videobonei" :scroll-top="scrollTop">
								<view  class="chat_list">
									<view v-for="(item,index) in chatlist" :key="index"  class="chatlist_item_box">
										<text class="chatlist_item" :style="{'background-color':transparency,'color':xuanzhongyanse}">
											<text class="nick_name">{{item.nick}} :text>{{item.payload.text}}
										text>
									view>
								view>
							scroll-view>
						view>
						<view class="iconimgcbot" v-if="show">
							<image class="iconimgcbotleft_play" :src="playbackble?zanting:bofang" @tap.stop="playback">image>
							
							
							<image :src="titilename" mode="" class="definition" @tap.stop="Switching">image>
							<image :src="comment?kaispl:gunabpl" class="iconpinglun" @tap.stop="getSystemInfo">image>
							<image src="https://sjwechat.oss-cn-shanghai.aliyuncs.com/static/liveandvideo/shezhi.png" class="slide" @click="slidenow">image>
							<input maxlength="30" class="input_box" id="chat_input" confirm-type="send" v-model="danmuValue"  placeholder-style="color:#fff;" placeholder="发表评论" @confirm="confirmTap" @blur="blur" @focus="chatFocus">input>
							<image src="https://sjwechat.oss-cn-shanghai.aliyuncs.com/static/liveandvideo/live3.png" class="backimg">image>
						view>
					view>
				block>
			live-player>
		view>
	view>
template>

<script>
import TIM from 'tim-wx-sdk';
	export default {
		props:{
			src:{
				type:Object
			},
			chat:{
				type:Array
			},
			scroll:{
				type:Number
			},
			livehengHeight:{
				type:Number
			}
		},
		data() {
			return {
				show:false, //屏幕是否显示操作按钮事件
				input:false,
				playbackble:false, //是否暂停
				fullscreenble:false, //是否横屏
				zanting:"https://sjwechat.oss-cn-shanghai.aliyuncs.com/static/liveandvideo/zanting.png",
				bofang:"https://sjwechat.oss-cn-shanghai.aliyuncs.com/static/liveandvideo/kaishi.png",
				quanping:"https://sjwechat.oss-cn-shanghai.aliyuncs.com/static/liveandvideo/qunaping.png",
				danmuValue:"", //横屏状态的输入框
				chatlist:[],
				rpxHright:0,
				rpxWhatch:0,
				timer:null,
				scrollTop:0,
				comment:true,
				kaispl:"https://sjwechat.oss-cn-shanghai.aliyuncs.com/static/liveandvideo/kaipl.png",
				gunabpl:"https://sjwechat.oss-cn-shanghai.aliyuncs.com/static/liveandvideo/guanpl.png",
				titilename:"https://sjwechat.oss-cn-shanghai.aliyuncs.com/static/liveandvideo/chaoqing.png",
				qingxi:["超清 1080P","高清 720P","标清 360P"],
				intelligiindex:"",
				Switchingclarity:false,
				srcilst:"",
				slidescroll:"",//滑动是否显示
				numslider:0,//滑动具体显示的数字
				sidertransparency:0,//评论区透明度
				transparency:"",//评论的rgba
				commentyanse:"白色",//评论的颜色
				xuanzhongyanse:"#fff",
				commentspeed:"超慢",//评论的速度 超慢,慢,正常,快,超快
				tianjiasudu:1000,
				
			}
		},
		created() {
			let xitong=uni.getSystemInfoSync()
			console.log(xitong)
			this.srcilst=this.src.rtmpUrl
			//this.getSystemInfo()
			console.log(this.src)
		},
		onReady() {
			this.playerCtx = uni.createLivePlayerContext('polyvLiveVideo',this);
		},
		mounted() {
			this.$nextTick(()=>{
				this.getheit()
			})
		},
		watch:{  
			chat(newData,prevData){  
				console.log(newData,'我是数据')  
				setTimeout(()=>{
					this.chatlist=newData
					console.log(this.tianjiasudu)
					this.getheit()
				},this.tianjiasudu)
			},
			scroll(newData,prevData){
				console.log(newData,"w s g d ")
			}
		}, 
		methods: {
			sliderspeedChange(e){//显示速度的事件
				if(e.detail.value==0){
					this.tianjiasudu=1000
				}
				if(e.detail.value==100){
					this.tianjiasudu=750
				}
				if(e.detail.value==200){
					this.tianjiasudu=500
				}
				if(e.detail.value==300){
					this.tianjiasudu=250
				}
				if(e.detail.value==400){
					this.tianjiasudu=0
				}
				console.log(this.tianjiasudu,"显示速度滑动的事件")
			},
			slispeedChanging(e){//显示速度滑动的事件
				console.log(e.detail.value,"显示速度滑动的事件")
				if(e.detail.value==0){
					this.commentspeed="超慢"
				}
				if(e.detail.value==100){
					this.commentspeed="慢"
				}
				if(e.detail.value==200){
					this.commentspeed="正常"
				}
				if(e.detail.value==300){
					this.commentspeed="快"
				}
				if(e.detail.value==400){
					this.commentspeed="超快"
				}
				
			},
			sliderstepChanging(e){//颜色动态滑块的事件
				if(e.detail.value==0){
					this.commentyanse="白色"
				}
				if(e.detail.value==50){
					this.commentyanse="灰色"
				}
				if(e.detail.value==100){
					this.commentyanse="黑色"
				}
				
			},
			sliderstepChange(e){ //颜色明度滑块的事件
				if(e.detail.value==0){
					this.xuanzhongyanse="#fff"
				}
				if(e.detail.value==50){
					this.xuanzhongyanse="#888"
				}
				if(e.detail.value==100){
					this.xuanzhongyanse="#000"
				}
			},
			sliderChanging(e){ //不透明度动态滑块的事件
				this.numslider=e.detail.value
			},
			sliderChange(e){//不透明度滑块的事件
				this.sidertransparency=this.numslider/100
				this.transparency="rgba(63,71,94,"+this.sidertransparency+")"
			},
			slidenow(){
				this.slidescroll=true
			},
			delslidescroll(){
				this.slidescroll=false
				this.xuanzhongyanse="#fff"
				this.numslider=0
				this.commentspeed="超慢"
			},
			Switching(){ //点击显示清晰度的切换
				this.Switchingclarity=true
			},
			intelligibility(index){
				this.intelligiindex=index
				console.log("我是清晰度的切换",index)
				if(this.intelligiindex==0){
					this.titilename="https://sjwechat.oss-cn-shanghai.aliyuncs.com/static/liveandvideo/chaoqing.png"
					this.srcilst=this.src.highRtmpUrl
				}
				if(this.intelligiindex==1){
					this.titilename="https://sjwechat.oss-cn-shanghai.aliyuncs.com/static/liveandvideo/gaoqing.png"
					this.srcilst=this.src.midRtmpUrl
				}
				if(this.intelligiindex==2){
					this.titilename="https://sjwechat.oss-cn-shanghai.aliyuncs.com/static/liveandvideo/bioaqing.png"
					this.srcilst=this.src.lowRtmpUrl
				}
				this.Switchingclarity=false
			},
			getheit(){
				let query =uni.createSelectorQuery().in(this);
				query.select('.chat_list').boundingClientRect(data => {
				  console.log("得到布局位置信息" + JSON.stringify(data));
				  // console.log("节点离页面顶部的距离为" + data.top);
				})
				query.exec((res) => {
					this.scrollTop=res[0].height
				});
			},
			getSystemInfo() {
				this.comment=!this.comment
			},
			fullscreenchangemethod(res){
				console.log("qunmp",res,this.fullscreenble)
				if(res.detail.fullScreen==false){
					this.fullscreenble=false
				}
			},
			confirmTap(e) {
				if(this.danmuValue.match(/^\s*$/)){
					this.$toast("评论不能为空");
				}else{
					let arr={
						nick:this.$store.state.user.nickName,
						from:this.$store.state.user.userId,
						payload:{
							text:e.detail.value
						}
					}
					// this.chatlist.push(arr)
					this.danmuValue=''
					this.$emit("changes",arr)
				}
			},
			focus(){ //横屏状态的输入框获取焦点事件
				// this.show=true;
			},
			blur(){ //横屏状态的输入框失去焦点事件
				clearTimeout(this.timer);
				// setTimeout(()=>{
				// 	this.show=false
				// },5000)
			},
			playback(){ //直播暂停事件
				this.playbackble=!this.playbackble
				if(!this.playbackble){
					this.playerCtx.play({
						success: res => {
							// this.fullscreenble = false
							// this.show=false
							console.log('我要执行了');
						},
						fail: res => {
							console.log('playback fail');
						}
					});
				}else{
					this.playerCtx.stop({
						success: res => {
							// this.fullscreenble = false
							// this.show=false
							console.log('我要执行了');
						},
						fail: res => {
							console.log('playback fail');
						}
					});
				}
			},
			quit(){ //直播退出横屏全屏事件
				this.$toast("ads");
				this.playerCtx.exitFullScreen({
					success: res => {
						this.fullscreenble = false
						this.show=false
					},
					fail: res => {
						console.log('quit fail');
					}
				});
			},
			fullscreen(){ //竖屏变横屏事件
				if(!this.fullscreenble){
					this.playerCtx.requestFullScreen({
						direction:90,
						success: res => {
							this.fullscreenble = true
							debugger
							console.log(this.$refs.polyvLiveVideo)
							// console.log('我要执行了');
						},
						fail: res => {
							console.log('fullscreen fail');
						}
					});
				}
			},
			statechange(e){
				console.log('我是直播状态live-player code:', e.detail.code)
			},
			chatFocus(){
				clearTimeout(this.timer);
			},
			showPlayControl(e){ //直播屏幕点击事件
				if(e.target.id == "chat_input") return;
				if(this.timer) clearTimeout(this.timer);
				if(this.show){
					this.show = false;
				}else{
					this.show = true;
					this.slidescroll=false
				}
				this.timer = setTimeout(() =>{
					this.show = false;
				},3000)
				
			},
			
		}
	}
script>

<style lang="scss" scoped>
	slider{
	    margin: 0;
	    padding: 0;
	}
	.box_bgimg{
		width: 500rpx;
		height:500rpx;
	}
	.video-box{
		width: 100%;
		height: 422rpx;
		position: relative;
		.vp-v{
			width: 100%;
			height:100%;
		}
		.box_bgimg{
			width: 500rpx;
			height:300rpx;
			z-index: 999;
		}
		.iconimg{
			width: 100%;
			height:100rpx;
			line-height:100rpx;
			color: #fff;
			font-size: 36rpx;
			display: flex;
			justify-content: space-between;
			align-items: centert;
			position: absolute;
			bottom:0rpx;
			box-sizing: border-box;
			.btniconimg{
				z-index: 5;
				padding:32rpx;
			}
			.backimg{
				width: 100%;
				height: 100%;
				position: absolute;
				bottom:0rpx;
				z-index:0;
				opacity: 0.4;
			}
			cover-image{
				width: 36rpx;
				height: 36rpx;
			}
			
		}
		.backimg{
			width: 100%;
			height: 100%;
			position: absolute;
			padding:0rpx;
			bottom:0rpx;
			z-index: 0;
		}
	}
	
	.control{
		width: 100vw;
		height: 100vh;
		position: relative;
		top: 0;
		left: 0;
		.slidescroll_box{
			.scrollslide{
				position: absolute;
				width:39%;
				height:100%;
				top:0;
				right:0;
				background-color: rgba(0,0,0,0.8);
				z-index: 99999;
				padding: 0rpx 36rpx;
				.Commentset{
					width: 100%;
					height: 44rpx;
					color: #fff;
					padding: 48rpx 0rpx;
					font-size: 32rpx;
				}
				.title_slider{
					color: #DFDFDF;
					font-size: 28rpx;
					margin-bottom: 30rpx;
				}
				.scrollslide_box{
					width:100%;
					height:38rpx;
					// line-height: 50rpx;
					display:flex;
					align-items: center;
					margin-bottom: 66rpx;
					.scrollslide_slide{
						width: 80%;
						height:38rpx;
						line-height: 38rpx;
						margin-left: 5rpx;
						text-align: left;
					}
					.numbaifen{
						flex: 1;
						height:38rpx;
						line-height: 38rpx;
						font-size: 28rpx;
						color: #DFDFDF;
						margin-left: 32rpx;
					}
				}
			}
		}
		.superdef_box{
			.Switclarity{
				position: absolute;
				width:100%;
				height:100%;
				top:0;
				right:0;
				background-color: rgba(0,0,0,0.8);
				z-index: 99999;
				.articulation_box{
					width: 100%;
					height: 100%;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content:center;
					font-size: 32rpx;
					box-sizing: border-box;
					&:last-child{
						margin-right:0;
						margin-left: 96rpx;
					}
					.articulation_active{
						color: #FA7F16;
						margin-right: 96rpx;	
						width: 216rpx;
						height: 112rpx;
						line-height: 112rpx;
						text-align: center;
						border-radius: 16rpx;
						border: 0.5px solid #FFFFFF;
					}
					.articulation_item{
						margin-right: 96rpx;
						width: 216rpx;
						height: 112rpx;
						line-height: 112rpx;
						text-align: center;
						border-radius: 16rpx;
						border:0.5px solid #FFFFFF;
					}
				}
			}
		}
		.iconimgctop{
			width: 100%;
			height: 120rpx;
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			box-sizing: border-box;
			z-index: 99;
			.tuichu{
				position: absolute;
				width: 18rpx;
				height: 32rpx;
				padding: 32rpx 20rpx;
				top: 50%;
				left:32rpx;
				transform: translate(0,-50%);
				z-index: 999;
			}
			.backimgc{
				width: 100%;
				height: 160rpx;
				position: absolute;
				top: 0;
				left: 0;
				padding:0;
				transform: rotate(180deg);
				opacity: 0.4;
			}
		}
		.chatlist_box{
				position: absolute;
				width:464rpx;
				height:300rpx;
				left:140rpx;
				bottom:120rpx;
				display: block;
				padding: 0 30rpx;
				box-sizing: border-box;
				.videobonei{
					width:100%;
					height:300rpx;
					.chat_list{
						.chatlist_item_box{
							width: 100%;
							display: block;
							box-sizing: border-box;
							font-size: 28rpx;
							line-height: 36rpx;
							margin-bottom: 8rpx;
							.chatlist_item{
								display: inline-block;
								border-radius: 6rpx;
								padding:12rpx 24rpx;
								color: #FFFFFF;
								.nick_name{
									color: #29A9FF;
									display: inline-block;
									margin-right: 8rpx;
								}
							}
						}
					}
				}
			}
		.iconimgcbot{
			width: 100%;
			position: absolute;
			bottom: 0;
			left: 0;
			box-sizing: border-box;
			padding-left: 32rpx;
			z-index: 99;
			display: flex;
			align-items: center;
			height: 120rpx;
			.iconimgcbotleft_play{
				width: 36rpx;
				height: 36rpx;
				z-index: 999;
				padding: 0 20rpx;
			}
			.definition{
				position: absolute;
				// bottom:52rpx;
				right:100rpx;
				color: #fff;
				width:96rpx;
				height: 46rpx;
				line-height:46rpx;
				// padding:6rpx 24rpx;
				// border-radius:30rpx;
				z-index: 999;
			}
			.iconpinglun{
				position: absolute;
				left:104rpx;
				width: 56rpx;
				height: 56rpx;
				padding: 0 20rpx;
				z-index: 999;
				margin-left: 32rpx;
			}
			.slide{
				position: absolute;
				left:220rpx;
				width: 56rpx;
				height:56rpx;
				padding:0rpx 20rpx;
				z-index: 999;
			}
			.input_box{
				color: #fff;
				background-color: rgba(194,194,194,0.5);
				height: 30rpx;
				margin-left:220rpx;
				border-radius: 6rpx;
				padding:8rpx 12rpx;
				z-index: 9999999;
			}
			.backimg{
				width: 100%;
				height: 160rpx;
				position: absolute;
				bottom:0;
				left: 0;
				z-index:0;
				opacity: 0.4;
			}
		}
	}
	.network{
		width: 100%;
		height: 100%;
		position: relative;
		.network_title{
			width: 100%;
			text-align: center;
			height: 100%;
			line-height: 100%;
		}
	}
style>

上面代码是直播标签里面的内容
当时困扰的是聊天竖屏状态的输入,横屏状态如何接收,以及横屏状态输入,其他用户如何接收
因为当时使用的是腾讯云的IM即时通讯服务,使用的时候会监听群组的消息状态,在这个监听中用一个数组去添加进去。
在子组件监听这个数组，通过this.$emit(“父组件方法名”,传递的内容)进行竖屏状态接受横屏状态的输入内容

如何让聊天区域置底

html

<view v-if="comment" class="chatlist_box">
							<scroll-view  scroll-y="true" class="videobonei" :scroll-top="scrollTop">
								<view  class="chat_list">
									<view v-for="(item,index) in chatlist" :key="index"  class="chatlist_item_box">
										<text class="chatlist_item" :style="{'background-color':transparency,'color':xuanzhongyanse}">
											<text class="nick_name">{{item.nick}} :text>{{item.payload.text}}
										text>
									view>
								view>
							scroll-view>
						view>

js

	getheit(){
		let query =uni.createSelectorQuery().in(this);
		query.select('.chat_list').boundingClientRect(data => {
		  console.log("得到布局位置信息" + JSON.stringify(data));
		  // console.log("节点离页面顶部的距离为" + data.top);
		})
		query.exec((res) => {
			this.scrollTop=res[0].height
		});
	},

我当时的做法是在进入子组件的时候获取标签的高度,在监听聊天数组中触发,竖屏状态也是一样的方法

小程序如何展示ppt(当前页面区域内展示),并进行放大缩小

<view  class="imagecontent">
	<movable-area scale-area class="movable-area">
		<movable-view class="movable-view"
			direction="all"  @scale="onScale" scale="true" scale-min="1" scale-max="4" :scale-value="scale" @dblclick="dblclick">
			<image v-if="kejiansrc" class="heihunter" :src="kejiansrc"  mode="heightFix">image>
		movable-view>
	movable-area>
view>

movable-area标签是支持图片的放大缩小,做法是使用阿里云的文档转换服务,把上传的ppt转化成图片,用户进入直播间的时候,获取当前直播间的ppt列表,点击选择要展示的ppt,默认展示第一个.

这大概就是目前小程序的主体功能,在此记录一下,有需要的朋友请拿走
(仅此记录,别无他意)