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

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

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

小程序直播或者视频播放,在使用live-player全屏,cover-view覆盖不上去,值得注意的地方_第1张图片

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

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

例子:

小程序的标签嵌套:



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');
        }
      });
    }
   
  },

展示效果:

小程序直播或者视频播放,在使用live-player全屏,cover-view覆盖不上去,值得注意的地方_第2张图片小程序直播或者视频播放,在使用live-player全屏,cover-view覆盖不上去,值得注意的地方_第3张图片

 

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


    
    123
    

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


    
    123
    

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

 

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

有同学问我,PlayerCtx 是啥,我把我的onload贴出来,大家可以看下,如果还有疑问请留言沟通。

 

 

  onLoad: function(options) {
    var that = this;
    var promise = new Promise(function(resolve, reject) {
      app.getUserInfo(that.data.serviceAccount, resolve);
    });
    promise.then(arr => {
      that.CameraCtx = wx.createCameraContext();
      that.CameraCtx = wx.getRecorderManager();
      that.PlayerCtx = wx.createLivePlayerContext('player');
      that.PusherCtx = wx.createLivePusherContext('pusher');
      that.PlayerCtx.play();
      that.gainSession();
      that.queryOrderInfo();
      that.queryCarInfo();
    }, error => {})


  },

 

你可能感兴趣的:(小程序,小程序,视频直播,live-player)