收藏
回答

live-player直播组件使用遇到的几个问题

问题模块 API/组件名称 终端类型 微信版本 基础库版本
API和组件 live-player 客户端 6.6.1 1.7.2

一、文档上提供的接口不生效:

ios手机上无法停止播放,代码如下:

onReady() {
  this.playerContext = wx.createLivePlayerContext('myLive');
},
handleStop() {
  if (this.data.isPlay) {
    this.playerContext.stop({
      success(){
        console.log("stop success!");
      },
      fail(){
        console.log("stop fail!");
      }
    });
  }
}

手机调试无法打印stop success!和stop fail!

stop接口执行了但也无法打印成功失败的语句,

在安卓手机上也会偶尔出现无法停止播放的情况。


二、实测live-player标签上catchtap点击事件在 IOS不生效:

安卓机上能生效


三、全屏后点击退出全屏,出现样式错乱

包括video组件也是这样,css就是使用了基本的flex布局,错乱时需触发一下其他事件才能恢复,比如此时点击一下vConsole,错乱现象就恢复正常了。



回答关注问题邀请回答
收藏

10 个回答

  • 微信技术专员 - Rex
    微信技术专员 - Rex
    2018-01-25

    你好,问题已复现,我们会尽快进行修复。

    2018-01-25
    赞同
    回复
  • 微信技术专员 - Rex
    微信技术专员 - Rex
    2018-01-24

    1、修复包这两天会发

    2、live-player等原生组件暂不支持tap事件

    3、麻烦提供个demo测试一下

    2018-01-24
    赞同
    回复
  • 微信技术专员 - Rex
    微信技术专员 - Rex
    2018-01-12

    麻烦提供一下机型。另外在其他机型也有这个问题不?

    2018-01-12
    赞同
    回复
  • Young
    Young
    2019-08-08

    请问无法停止播放的问题解决了吗?什么时候放新包?

    2019-08-08
    赞同
    回复
  • 张三李四
    张三李四
    2019-02-19

    我现在还有这个问题,全屏后退出全屏,样式错乱。并且,全屏时点击暂停,退出全屏时,画面会黑屏。请问你们解决了吗?

    2019-02-19
    赞同
    回复
  • 山里育
    山里育
    2018-02-27

    @官方 请问无法停止播放的问题解决了吗?什么时候放新包?

    2018-02-27
    赞同
    回复
  • ^_^
    ^_^
    2018-01-24

    测试用图

    2018-01-24
    赞同
    回复
  • ^_^
    ^_^
    2018-01-24

    @黄 希望贵方测试下2楼的四项,特提供完整的测试代码如下:

    livePlayer.js:

    Page({
      data: {
        //测试
        urlMain: "rtmp://live.hkstv.hk.lxdns.com/live/hks",
        urlAssist: "rtmp://v1.one-tv.com/live/mpegts.stream",
        isPlay: true,
        isUrlMain: true,
        isFullscreen: false,
        isBarShow: true
      },
      onReady(){
        this.playerContext = wx.createLivePlayerContext('myLive');
      },
      onFullscreenChange() {
        this.setData({ isFullscreen: !this.data.isFullscreen });
      },
      handlePlayStop() {
        if (this.data.isPlay) {
          this.playerContext.stop({
            success: function () {
              console.log('stop success!')
            },
            fail: function () {
              console.log('stop failed!')
            }
          });
          this.setData({ isPlay: false });
        } else {
          this.playerContext.play();
          this.setData({ isPlay: true});
        }
      },
      handlePlay() {
        this.playerContext.play();
        this.setData({ isPlay: true });
      },
      handleMainAssist() {
        if (this.data.isUrlMain) {
          this.setData({isUrlMain: false });
        } else {
          this.setData({ isUrlMain: true });
        }
      },
      handleRequestFullScreen() {
        this.playerContext.requestFullScreen({ direction: 90 });
      },
      handleExitFullScreen() {
        this.playerContext.exitFullScreen();
      },
      handleBarShow() {
        this.setData({ isBarShow: !this.data.isBarShow });
      },
      keepBarShow() {
        this.setData({ isBarShow: true });
      },
    })

    livePlayer.wxml:

    <view class='live-box'>
      <live-player class="live-player" id="myLive" bindstatechange="onPlayChange" bindfullscreenchange="onFullscreenChange" src="{{isUrlMain?urlMain:urlAssist}}" mode="live" autoplay="{{isPlay}}" background-mute="{{true}}" object-fit="fillCrop">
        <cover-view class="cover-box" catchtap="handleBarShow">
           <cover-image class="cover-key-center" wx:if="{{!isPlay}}" catchtap="handlePlay" src="/images/livePlayer/play-center.png" />
          <cover-view class="cover-key" wx:if="{{isFullscreen && isBarShow}}" catchtap="keepBarShow">
            <cover-view class="cover-key1" catchtap="handlePlayStop">
              <cover-image wx:if="{{isPlay}}" src="/images/livePlayer/stop.png" />
              <cover-image wx:else src="/images/livePlayer/play.png" />
            </cover-view>
            <cover-view class="cover-key3" wx:if="{{urlAssist}}" catchtap="handleMainAssist">
              <cover-view wx:if="{{isUrlMain}}">主流</cover-view>
              <cover-view wx:else>辅流</cover-view>
            </cover-view>
            <cover-image class="cover-key5" catchtap="handleExitFullScreen" src="/images/livePlayer/full-screen-exit.png" />
          </cover-view>
        </cover-view>
      </live-player>
      <view class="live-key" wx:if="{{!isFullscreen}}">
        <view class="key1" catchtap="handlePlayStop">
          <image wx:if="{{isPlay}}" src="/images/livePlayer/stop.png" />
          <image wx:else src="/images/livePlayer/play.png" />
        </view>
        <view class="key3" catchtap="handleMainAssist">
          <text wx:if="{{isUrlMain}}">主流</text>
          <text wx:else>辅流</text>
        </view>
        <image class="key5" catchtap="handleRequestFullScreen" src="/images/livePlayer/full-screen.png" />
      </view>
    </view>


    livePlayer.wxss:

    .live-box {
      width: 100vw;
      height: 100vh;
      background: #000;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
     
    .live-player {
      margin-top: 106rpx;
      width: 100%;
      height: 422rpx;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
     
    .live-player .cover-box {
      width: 100%;
      height: 100%;
      position: relative;
    }
    .live-player .cover-box .cover-key-center {
      width: 160rpx;
      height: 160rpx;
      position: absolute;
      left: 50%;
      margin-left: -80rpx;
      top: 50%;
      margin-top: -80rpx;
    }
     
    .live-player .cover-box .loading-img {
      width: 408rpx;
      height: 320rpx;
      position: absolute;
      left: 50%;
      margin-left: -204rpx;
      top: 50%;
      margin-top: -160rpx;
    }
     
    .live-player .cover-box .cover-key {
      width: 1310rpx;
      height: 94rpx;
      border-radius: 20rpx;
      background: rgba(67, 68, 71, 0.70);
      background: rgba(34, 34, 34, 0.80);
      background: rgba(0, 0, 0, 0.70);
      position: absolute;
      left: 50%;
      margin-left: -655rpx;
      bottom: 0;
    }
     
    .live-player .cover-box .cover-key .cover-key1 {
      width: 48rpx;
      height: 48rpx;
      position: absolute;
      left: 4%;
      top: 50%;
      margin-top: -24rpx;
    }
     
    .live-player .cover-box .cover-key .cover-key1 cover-image {
      width: 100%;
      height: 100%;
    }
     
    .live-player .cover-box .cover-key .cover-key3 {
      width: 120rpx;
      height: 56rpx;
      border: 2rpx solid #fff;
      border-radius: 200rpx;
      text-align: center;
      position: absolute;
      left: 71%;
      top: 50%;
      margin-top: -28rpx;
    }
     
    .live-player .cover-box .cover-key .cover-key3 cover-view {
      line-height: 56rpx;
      font-family: PingFangSC-Regular;
      font-size: 28rpx;
      color: #fff;
    }
     
    .live-player .cover-box .cover-key .cover-key5 {
      width: 48rpx;
      height: 48rpx;
      position: absolute;
      left: 93%;
      top: 50%;
      margin-top: -24rpx;
    }
     
    .live-box .live-key {
      margin-top: 416rpx;
      width: 650rpx;
      height: 200rpx;
      background: #2b2b2b;
      color: #fff;
      border-radius: 20rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
    }
     
    .live-box .live-key .key1 {
      width: 52rpx;
      height: 52rpx;
    }
     
    .live-box .live-key .key1 image {
      width: 100%;
      height: 100%;
    }
     
    .live-box .live-key .key3 {
      width: 120rpx;
      height: 56rpx;
      border: 2rpx solid #fff;
      border-radius: 200rpx;
      text-align: center;
    }
     
    .live-box .live-key .key3 text {
      line-height: 56rpx;
      font-family: PingFangSC-Regular;
      font-size: 28rpx;
      color: #fff;
    }
     
    .live-box .live-key .key5 {
      width: 52rpx;
      height: 52rpx;
    }
     
    .toast-content-box .toast-content {
      position: absolute;
      top: 550rpx;
      left: 50vw;
      margin-left: -28vw;
    }


    livePlayer.json:

    {
      "navigationBarBackgroundColor": "#000",
      "navigationBarTextStyle": "white",
      "backgroundColor": "#000",
      "disableScroll": true
    }


    用到的5张图片images/livePlayer:(前四个图片为白色,黑色背景下可以看到)







    2018-01-24
    赞同
    回复
  • ^_^
    ^_^
    2018-01-15

    这个为何审核不通过呢,是测试了未复现这些问题么?

    2018-01-15
    赞同
    回复
  • ^_^
    ^_^
    2018-01-13

    @黄

    1、live-player 全屏下概率性无法停止播放:

    机型:ios7plus系统11、ios5s


    2、live-player 全屏下无法停止播放:

    机型:vivo X6S A安卓5.1.1、红米Note 4X安卓6.0.1


    3、live-player 切换src地址,需再点击播放才生效:

    机型:ios6s系统10.3.3、系统11


    4、video 点击退出全屏后出现样式错乱:

    机型:乐视2、华为荣耀V8


    2018-01-13
    赞同
    回复
登录 后发表内容