在小程序中如何正确使用视频和直播组件
最近在开发小程序,使用的框架的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>
<!-- <view class="definition" @tap.stop="Switching">{{titilename}}</view> -->
<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,默认展示第一个.
这大概就是目前小程序的主体功能,在此记录一下,有需要的朋友请拿走
(仅此记录,别无他意)
2449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
