live-player封装至某一个自定义组件中以后,
bindstagechange定义的事件,在自定义组件中无法触发,
console中不断的提示“do not find stagechange handler in current page”
如果把bindstagechange事件定义在引用该自定义组件的page中,则无此提示,
能成功触发引用该自定义组件的Page js中定义的函数
自定义组件中其他bind函数无此问题
自定义组件的wxml
< live-player id = "livePlayer" src = "rtmp://live.hkstv.hk.lxdns.com/live/hks" mode = "live" background-mute autoplay = "false" bindstatechange = "statechange" binderror = "error" class = "player {{fullScreen ? 'player-fullscreen': ''}};" /> |
自定义组件js
Component({ properties: { src: String, // 简化的定义方式 }, data: { status: undefined, showControls: false , fullScreen: false , }, ready: function (e) { const animation = wx.createAnimation({ duration: 1000, timingFunction: 'ease' , }) this .animation = animation // 使用 wx.createMapContext 获取 map 上下文 this .liveCtx = wx.createLivePlayerContext( 'livePlayer' , this ) if ( this .data.url) { this .liveCtx.play() } }, methods: { statechange(e) { const { code } = e.detail console.log(code) switch (code) { case 2004: //开始 this .setData({ status: 'playing' , }) break case 2006: //结束 this .setData({ status: 'pause' , }) break default : break } }, }, }) |
此种方式,console会提示在page中找不到statechange handler
如果在引用此自定义组件的page中定义:
// packages/live/pages/details/index.js Page({ data: { url: 'rtmp://live.hkstv.hk.lxdns.com/live/hks' , }, statechange(e) { const { code } = e.detail console.log(code) }, }) |
则可以触发page中的stagechange函数
按理说,要想触发page中的函数,需要在自定义组件中triggerEvent才对
bug?
你好 你有在自定义组件中实现live-player全屏播放吗 我这样写live-player实例对象获取到了 但调取全屏方法始终不生效 代码没报错 在小程序里一样的代码可以全屏