- 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不能覆盖在其上方的问题。
2019-09-01 - live-player全屏后,其上的canvas元素不再显示?
微信版本:8.0.10 小程序基础库:2.19.4 控件:live-player、canvas 需要在live-player上层显示canvas元素绘制特定图像,在非全屏模式下,canvas能够正常的呆在live-player标签之上,这种情况正常。但在live-player全屏后,其上的canvas元素便不再显示。
2021-09-09