公告列表
公告列表
收藏
回答

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不能覆盖在其上方的问题。

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

5 个回答

  • ℡长城
    ℡长城
    2021-09-09

    同样的问题，一模一样

    2021-09-09
    有用
    回复
  • ⛄ WELLS 💤
    ⛄ WELLS 💤
    2020-11-18

    同问， 我这里也发现android， 在live-player 中 使用canvas ，全屏的时候，动画无法显示。

    2020-11-18
    有用
    回复
  • 阿斯顿
    阿斯顿
    2020-01-03

    同问，我们用cover-image 做了一个返回按钮。iOS能显示出来，安卓显示不出来

    2020-01-03
    有用
    回复 2
  • 咖啡
    咖啡
    2019-10-24

    同问，帮顶+1

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

    同问，帮顶

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