收藏
回答

canvas无法位于全屏下的live-player之上?

目的:在live-player 之上显示一个canvas层用于绘制一些信息。

微信版本: Android7.0.6,小程序基础库:2.8.1 ,使用的到的控件:live-player, canvas

当live-player处于“非全屏”模式下时:canvas可覆盖在live-player之上,示例图如下:


当live-palyer处于“全屏”模式下时:canvas不能覆盖在live-player之上,示例图如下:


具体代码如下:

index.wxml

<live-player id="livePlayer" class="player-container-view" style="width:390px;height:220px;z-index:100;" autoplay="{{true}}" mode="live"
            src="rtmp://58.200.131.2:1935/livetv/hunantv" orientation="vertical">

     <canvas canvas-id="container" style="width:390px;height:220px;position: absolute;top:0;left:0;z-index: 9999;color:#ffffff;"

binderror="canvasError"></canvas>

</live-player>
 
<button class="btn" type="primary" bindtap="onTap">
    进入全屏
</button>


index.js

Page({
  onTap: function(){
    this.playerCtx.requestFullScreen({
      direction: 90,
      success: res => {
        console.log('requestFullScreen success: ', res)
      },
      fail: res => {
        console.log('requestFullScreen fail: ', res)
      }
    })
  },
  canvasError: function(e) {
    console.log("canvas error ", e)
  },
  onLoad: function(){
    wx.setNavigationBarTitle({
      title: 'live-player&canvas'
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.playerCtx = wx.createLivePlayerContext("livePlayer")
    this.canvasCtx = wx.createCanvasContext('container');
    this.canvasCtx.clearRect(0, 0, 390, 220);
    this.canvasCtx.setStrokeStyle("#ff0000")
    this.canvasCtx.setLineWidth(5)
    this.canvasCtx.strokeRect(10, 10, 370, 200)
    this.canvasCtx.draw()
  }
})


还请知道的高手指点指点,怎么解决live-player全屏时,canvas不能覆盖在其上方的问题。

最后一次编辑于  09-01
回答关注问题邀请回答
收藏

2 个回答

  • 咖啡
    咖啡
    10-24

    同问,帮顶+1

    10-24
    赞同
    回复 2
    • 陈阳
      陈阳
      11-06
      你好不清楚你是打算用canvas绘制什么东西。我之前是打算用canvas绘制画布,但是发现了如上的问题,后来没有采用livePusher自带的全屏,进而改成了手动旋转画面方向并改变画面大小的全屏,算是绕过了上面的问题。刚才发现官方文档上面有个miniprogram-barrage 组件,已经实现了弹幕功能,并且刚才测试在live-pusher全屏模式下工作完好,你可以看看这个组件。
      11-06
      回复
    • 咖啡
      咖啡
      11-08回复陈阳
      3Q,我这边的需求是要用canvas实现全屏动画
      11-08
      回复
  • Y
    Y
    09-26

    同问,帮顶

    09-26
    赞同
    回复 1
    • 陈阳
      陈阳
      11-06
      你好不清楚你是打算用canvas绘制什么东西。我之前是打算用canvas绘制画布,但是发现了如上的问题,后来没有采用livePusher自带的全屏,进而改成了手动旋转画面方向并改变画面大小的全屏,算是绕过了上面的问题。刚才发现官方文档上面有个miniprogram-barrage 组件,已经实现了弹幕功能,并且刚才测试在live-pusher全屏模式下工作完好,你可以看看这个组件。
      11-06
      回复
问题标签