今天研究了下小程序的live-player控件,主要是用来播放rtmp的视频流,这个控件还是有一些小坑的,现记录下来,希望给其他人以警示,少走一些弯路,先上代码
<live-player id="player" src="rtmp://58.200.131.2:1935/livetv/hunantv" mode="live" autoplay bindstatechange="statechange" binderror="error" sound-mode="speaker" style="width:100%; height:400rpx;" />
这样它就可以自动播放rtmp的视频,但是如果单写这个是不可以!必须在后台开通权限才可以播放视频,个人账号暂时没有权限,必须是公司账号,需要在小程序后台的服务类目设置相应的类目,具体类目可以看文档,这里我推荐大家设置工具类目中的人工客服,因为其他的类目需要资质审核
image.png
设置好类目之后在开发中的接口设置中打开实时播放音视频流,这样你才能够看到视频
image.png
下面介绍一下方法,简单的播放暂停就不说了,网上一堆,要说咱就说点不一样的,全屏播放和缩小播放
//全屏画面并旋转90度
requestFull() {
this.ctx.requestFullScreen({
success: res => {
console.log('play success')
},
fail: res => {
console.log('play fail')
},
direction:90
})
},
//退出全屏
exitFull(){
this.ctx.exitFullScreen({
success: res => {
console.log('play success')
},
fail: res => {
console.log('play fail')
}
})
},
代码好写,可是小程序的播放控件有bug!!!,在全屏的情况下,播放控件可以上下滑动,在滑动到看不到播放控件的时候,退出全屏,那么小屏也将变黑,没有视频画面!其他的手机笔者没有试,我的iphone11是会出现这种情况的,如何解决呢,看代码
<live-player id="player" src="rtmp://58.200.131.2:1935/livetv/hunantv" mode="live" autoplay bindstatechange="statechange" binderror="error" sound-mode="speaker" style="width:100%; height:400rpx;" >
<cover-view class="full"> </cover-view>
</live-player>
.full{
width: 100%;
height: 100%;
background: transparent;
}
哈哈,在live-player控件上面覆盖一个cover-view,让用户没有办法扒拉player控件就好啦,而且其他的想要加在控件上的按钮也可以加载cover-view上面!
