微信小程序> 小程序直播或者视频播放,在使用liveplayer全屏,coverview覆盖不上去,值得注意的地方

小程序直播或者视频播放,在使用liveplayer全屏,coverview覆盖不上去,值得注意的地方

浏览量:1245 时间: 来源:贤和兄

最近在做小程序视频客服这块的功能,按照官方或者是别人的写法,在拷贝的过程中存在一定的误区,具体误区为:

1、在使用live-player标签的过程中,自以为是你想的那样使用,最好是先看一两遍文档,一下是需要且多看几下的

2、官方组件live-player,在标签的开头和结尾需要注意的,具体例子下面例子有说有

live-player src="https://domain/pull_stream" mode="RTC" autoplay bindstatechange="statechange" binderror="error" style="width: 300px; height: 225px;" /

3、在live-player的完善过程中,百度查询的一些代码存在一定的问题,比如官方提供了全屏的功能,但是有些地方可以看到需要写两套css来控制全屏;在开发者工具中全屏是不生效的,但是在真机是可以看得到效果的

例子:

小程序的标签嵌套:

!-- 视频窗口 --view class='win_player' style='height: {{vidoHeight}}px;' bindtap="quitFullScreen" hidden="{{hidden}}"  live-player id="player" class='{{winstyle}}' src="http://pili-media.live-test.v2gogo.com/recordings/z1.v2gogo-live-test.620b18566a5d4848b6d8ca789a1120c3/1534301729.flv" mode="RTC" autoplay="true" bindstatechange="playerstatechange" binderror="error"    cover-view class='full_img_idv' bindtap="fullScreen"      cover-view wx:if="{{fullScreenFlag}}"        cover-image src="../../images/vido/min.png" class='full_img' /      /cover-view      cover-view wx:else        cover-image src="../../images/vido/max.png" class='full_img' /      /cover-view    /cover-view  /live-player  live-pusher id="pusher" url="{{sendurl}}" mode="RTC" autopush="true" bindstatechange="pusherstatechange" //view

js:全屏调用的方法

fullScreen: function() {    var that = this;    //全屏    var vidoHeight = wx.getSystemInfoSync().windowHeight;    var fullScreenFlag = that.data.fullScreenFlag;    if (fullScreenFlag) {      fullScreenFlag = false;    } else {      fullScreenFlag = true;    }    if (fullScreenFlag) {      //全屏      that.PlayerCtx.requestFullScreen({        success: res = {            that.setData({              fullScreenFlag: fullScreenFlag            });            console.log('我要执行了');        },        fail: res = {          console.log('fullscreen fail');        }      });    } else {      //缩小      that.PlayerCtx.exitFullScreen({        success: res = {          console.log('fullscreen success');          that.setData({            fullScreenFlag: fullScreenFlag          });        },        fail: res = {          console.log('exit fullscreen success');        }      });    }     },

展示效果:

 

以上需要注意的是标签的嵌套,嵌套不正确最终会导致在苹果手机上面有效,在安卓手机上面是无效的,以下标签嵌套反例子:

view class="page-body"    live-player autoplay id="player" src="rtmp://10566.liveplay.myqcloud.com/live/10566_70c8e4db829746af8c2ca766099d8bad"/live-player    cover-view class="cover-view"123/cover-view    button bindtap="fullScreen"全屏/button/view

错误之处:以上的cover-view并不在live-player标签中嵌套,在苹果手机是正常显示,可以覆盖的效果,但是在安卓手机上面就会出现失效。

view class="page-body"    live-player autoplay id="player" src="rtmp://10566.liveplay.myqcloud.com/live/10566_70c8e4db829746af8c2ca766099d8bad"/    cover-view class="cover-view"123/cover-view    button bindtap="fullScreen"全屏/button/view

错误之处:以上的代码代码中live-player与官方给出的文档一致,但是在安卓手机上面就是没有效果,在苹果手机上面是可以正常的展示,原因在并没有采用末尾标签/live-player进行嵌套

 

以上为本人在开发过程中遇到的问题,如果有更好的办法,望小伙伴能一起分享下,谢谢。

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎