uniapp做直播+可拖动弹幕

项目需求：用uniapp开发微信小程序，直播界面做可拖动弹幕。

一、直播页面，微信小程序的<live-player>组件就是用来搭建直播的。
我的项目需求是从上一个页面点击后直接跳转进对应的直播间，所以这个界面一开始就需要是全屏播放的。
1.<live-player>的全屏.

<live-playerid="liveplayer"src="https://domain/pull_stream"mode="live":autoplay="true"orientation="vertical"object-fit="fillCrop"@statechange="statechange"@error="error"
>
</live-player>

其中一个必不可少的属性就是id，这个id之后会用来在JS代码中获取live-player的上下文。

// 创建直播流对象，获取live-player的上下文。
let player = uni.createLivePlayerContext('liveplayer', this);

拿到这个上下文之后就可以通过调用方法实现全屏和退出全屏

// 直播流对象全屏
player.requestFullScreen();
//退出全屏
player.exitFullScreen();

2.直播弹幕区
有了全屏的直播后，需要在这个直播上放一个弹幕区域和按钮等。由于  map、video、canvas、camera、live-player、live-pusher都是原生组件，层级比前端组件高，即便使用了z-index前端组件也是无法覆盖到原生组件上的。所以采用官方提供的`<cover-view>`进行覆盖，这里注意，`<cover-view/> 内只能嵌套 <cover-view/> <cover-image/> <button/> <navigator/> <ad/>，其他标签的子节点树在真机上都会被忽略。`

有了这些限制，无法用<scroll-view>做一个可上下拖动的弹幕。所以采用以下的方法。

官方文档中，给cover-view提供了一个css的属性overflow-y: scroll;（官网上写的是overflow: scroll;试过了没有用），配合:scroll-top=“scrollTop+‘px’” 或 :scroll-top=" '"这两段代码让设定了高度的区域在内容溢出后实现可拖动，我这里使用了前者，因为后面在发送弹幕后还要实现自动定位到最后一行。

<!-- 弹幕 -->
<cover-view class="barrage" id="message-items" :scroll-top="scrollTop+'px'"><cover-view class="barrageItem" v-for="(item,index) in msgList" :key="index"><cover-view class="barrageIcon" :class="item.barrageIcon == '铁粉'? 'ironBarrageIcon' : 'newBarrageIcon'">{{item.barrageIcon}}</cover-view><cover-view class="barrageName">{{item.barrageName}}：</cover-view><cover-view class="barrageContent">{{item.barrageContent}}</cover-view></cover-view>
</cover-view>

.barrage{width:380rpx;height:440rpx;margin: 0 0 20px 0;overflow-y: scroll;.barrageItem{line-height: 21px;margin: 5px 0;.barrageIcon{display: inline-block;color: rgba(255, 255, 255, 1);font-size: 14px;border-radius: 5px;text-align: center;line-height: 21px;width: 37px;height: 21px;}.newBarrageIcon{background-color: rgba(0, 186, 173, 1);}.ironBarrageIcon{background-color: rgba(255, 141, 26, 1);}.barrageName{display: inline-block;margin-left: 6px;color: rgba(255, 255, 255, 1);font-size: 12px;}.barrageContent{display: inline-block;color: rgba(229, 229, 229, 1);font-size: 12px;}}
}

到这里弹幕就搭建好了，现在需要在页面加载完成后以及发送完弹幕后，弹幕区域自动定位在最后一行。写JS代码。

// 弹幕滚动到底部,每次发送弹幕后需调用
letBarrageToButtom(){var _this = this;const query = uni.createSelectorQuery().in(this);query.select('.barrageItem').boundingClientRect(rect => {//这里的逻辑就是，把每条弹幕的高度x弹幕的条数，再加上每条弹幕之间的距离，margin值，这个10根据自己的样式调整var toTop = (_this.msgList.length*rect.height+(rect.height*10));// _this.setData({scrollTop:toTop});this.scrollTop = toTop;}).exec();
},

其中 uni.createSelectorQuery() 和 .select(’ ').boundingClientRect 都是官方提供的方法，地址随后贴上来。
3.input输入框的伪代码
现在有了可拖动的弹幕区域，就需要有个可以发送弹幕的input框，但是在<scroll-view>中不能嵌套input框，否则在真机上会被隐藏。好消息是，虽然input框被隐藏了，但是依旧可以通过方法获取焦点并获取到用户输入的内容。

HTML

<!-- 弹幕输入框 -->
<cover-view class="barrageInput" @tap='tapInput'><cover-view class='text' :class="inputInfo == '写评论……'? 'placeholder' : ''">{{inputInfo}}</cover-view><input class='input' v-model="inputModel" focus='inputFocus' @input='inputing' @blur='blurInput' type="text" confirm-type="send" @confirm="sendBarrage"></input>
</cover-view>

css

.barrageInput{width: 280px;height: 35px;line-height: 35px;background-color: rgba(0, 0, 0, 0.4);border-radius: 18px;.placeholder{color: rgba(229, 229, 229, 1);font-size: 13px;letter-spacing: 2px;}.text{height: 35px;line-height: 35px;color: white;margin: 0 15px;}.input{height: 35px;line-height: 35px;color: white;margin: 0 15px;/* margin-top为text的高度，保持视觉上一致 */margin-top: -35px; }
}

// 将焦点给到 input（在真机上不能获取input焦点）
tapInput() {//在真机上将焦点给inputthis.inputFocus = true,//初始占位清空this.inputInfo = ''
},
// input 输入时将 input 的输入内容给到cover-view
inputing(e){this.inputInfo = e.detail.value;
},
// input失焦时还原占位符
blurInput(e) {this.inputInfo = '写评论……';this.inputModel = '';
},
// 点击键盘右下角发送，发送弹幕
sendBarrage(){// 先判断要发送的信息是否为空，避免向后台发送无用信息if(this.inputInfo != ''){let barrage = {id:20,barrageIcon: '新粉',barrageName: '新的弹幕',barrageContent:this.inputInfo,barrageMoreContent:''}barrage = this.getNewline(barrage);this.msgList.push(barrage);this.inputModel = '';this.inputInfo = '写评论……';this.inputFocus = false;this.letBarrageToButtom();}else{return;}
}

到此，弹幕的发送功能也完成了。
4.弹幕的换行。
在做测试的时候发现，当弹幕字数较多时，并不会自动换行，而是超出部分直接隐藏了。这是因为<scroll-view>默认的样式有 white-space: nowrap; line-height: 1.2; display: block;
所以在需要换行的地方加了一行white-space:pre-wrap;虽然可以换行，但是content部分在块内换行，（弹幕内容区独自换行，前面的徽标和名字不动，样式有问题。）这里解决了好久，因为业务原因没有找到合适的方法，于是选择了手动裁切弹幕内容。

<!-- 弹幕 -->
<cover-view class="barrage" id="message-items" :scroll-top="scrollTop+'px'"><cover-view class="barrageItem" v-for="(item,index) in msgList" :key="index"><cover-view class="barrageIcon" :class="item.barrageIcon == '铁粉'? 'ironBarrageIcon' : 'newBarrageIcon'">{{item.barrageIcon}}</cover-view><cover-view class="barrageName">{{item.barrageName}}：</cover-view><cover-view class="barrageContent">{{item.barrageContent}}</cover-view><cover-view class="barrageMoreContent" v-if="item.barrageMoreContent">{{item.barrageMoreContent}}</cover-view></cover-view>
</cover-view>

css

.barrageMoreContent{color: rgba(229, 229, 229, 1);font-size: 12px;width: 100%;// 文字换行white-space:pre-wrap;//下面两行用于纯数字弹幕的换行，由于一串数字在计算机看来是一个长单词，如果不手动设置，是不会在单词内换行的，导致超出部分依旧被隐藏而不是换行。word-wrap: break-word;word-break: break-all;
}

// 裁切数字换行
getNewline(list){let _listMsg = list.barrageContent;if(list.barrageName.length + list.barrageContent.length > 11){list.barrageContent = _listMsg.slice(0,11 - list.barrageName.length);list.barrageMoreContent = _listMsg.slice(11 - list.barrageName.length);}return list;
}

这段代码在初始化弹幕和发送弹幕后调用即可。个人感觉不是好的解决办法，以后有了更好的来更换代码。

最后效果图如下：

uniapp做直播+可拖动弹幕相关推荐

现在有很多第三方的SDK来做直播，那么我们改选择哪一种？
现在大部分的都会借助第三方的直播技术,这样可以保证直播的质量,趣拍直播就很不错,SDK很好集成,芒果直播也在用.下面来分析一下趣拍直播的一些心得. 如何快速搭建一个完整的手机直播系统在这个直播如火如 ...
如何搭建Rtmp服务结合uni-app开发直播APP
前言: 由于自己有一个IM类的应用,为了完善它所以决定也加上直播和短视频功能.做直播目前有两种方法,一是直接对接第三方的直播服务产品,二是自己搭服务再开发.所以这里也从这两个方法推荐简单的实现方式,阿 ...
为何互联网公司纷纷开始做直播？
五一小长假,360智能摄像机对全国各大风景区.交通路况等进行实时直播.开展类似业务的不只是360一家,让人们就像看春晚一样实时收看影响内容,视频直播正在成为互联网巨头押注的新业务. 视频直播究竟在解决 ...
电视台，做直播别掉进这些坑，踩了这些雷
互联网直播经过一轮又一轮的概念追捧炒作,又经过了一波又一波的资本追逐洗礼,终于在2017年第一季度过后,逐步褪去了光环,众神归位,直播回到本质--直播只是工具和手段,内容才是核心. 作为后知后觉的直播 ...
斗鱼做直播已经年收益突破40亿：一对一在线直播程序源码、直播网站搭建就找布谷科技...
斗鱼做直播已经年收益突破40亿:一对一在线直播程序源码.直播网站搭建就找布谷科技据相关部门报道在3月25日斗鱼单靠直播现在年收益已经突破40亿了,游戏直播在线直播程序源码依旧是名列前茅的,占据的市场 ...
uniapp h5直播拉流的几种方法 flv.js， video.js，阿里播放器sdk，video标签
uniapp h5直播拉流的几种方法 flv.js, video.js, 阿里播放器sdk,video标签前言首先引入资源文件需要创建index.html 模板文件 flv.js video.j ...
李子柒爆红：既然做直播能年薪过亿, 为何还要努力高考？
"李家有女,人称子柒." 这是李子柒的简介,若不是看她粉丝达千万,很难让人把她与网红联系到一起. 她既没网红脸也没大长腿,却是网红界的一股清流. 看过李子柒视频的人,无一不对那视频 ...
小红书做直播的背后，隐藏了什么秘密？
作者 | 婷婷的勇敢世界来源 | 几何小姐姐(ID:jihexj) 转载请联系授权(微信ID:jihexj2019) 小红书上周发布了他们要做电商直播的消息.这是非常大的一个商业动作.对于行业里 ...
新手坐高铁怎么找车厢_一个新手怎么做直播卖衣服？找对货源供应商成功一半...
这两年是直播的"风口",江湖上到处都是年入千万元的传说.服装作为电商第一大品类,门槛低,作为直播新人,大多数人会选择卖衣服开启直播的创业路.那么,一个新手怎么做直播卖衣服?直播卖衣 ...

uniapp做直播+可拖动弹幕

uniapp做直播+可拖动弹幕相关推荐

最新文章

热门文章