评论

微信小程序live-player实现全屏的方法

在uniapp和微信的官方文档上都没有介绍全屏的实现方式,只是提及了bindfullscreenchange这个全屏变化监听方法。具体实现全屏的方法在微信官方文档的API中。

<live-player>这个组件在uniapp和微信的官方文档上都没有介绍全屏的实现方式,只是提及了bindfullscreenchange这个全屏变化监听方法。具体实现全屏的方法在微信官方文档的API中。

主要实现方法是,给<live-player>组件设置id,通过wx.createLivePlayerContext('live-player', this) 来获取LivePlayerContext 对象,然后调取LivePlayerContext 对象上requestFullScreen()方法来实现全屏显示,调用exitFullScreen()方法来关闭全屏。

要注意的是<live-player>组件并没有全屏按钮,需要自己写一个切换全屏的按钮,可以通过在<live-player></live-player>中嵌套<cover-view>来实现。微信小程序由于实现了原生组件同层渲染,也可以直接嵌套,不需要使用<cover-view>。

组件写法:

<live-player id='live-player' class="liveplayer" :src="url" @click="showFull"</live-player>

全屏切换代码:

		cutFull(){//切换全屏
                let player = wx.createLivePlayerContext('live-player', this);
                this.isFull = !this.isFull
                if(this.isFull){
                    player.requestFullScreen({
                        direction:90,
                        success(){
                            console.log('success');
                        },
                        fail(){
                            console.log('fail');
                        }
                    })
                }else{
                    player.exitFullScreen()
                }
            },




最后一次编辑于  2022-12-05  
点赞 1
收藏
评论

2 个评论

  • 宇宙顶尖超级无敌软件开发工程师
    宇宙顶尖超级无敌软件开发工程师
    06-21

    全屏没问题了,可是怎么关闭啊


    06-21
    赞同
    回复
  • 二米粥
    二米粥
    2022-12-22

    请问你在真机上测试过么,现在这样调用全屏方法没反应,成功和错误都没有经过,是官方有错还是现在有其他写法

    2022-12-22
    赞同
    回复 2
    • 麻溜
      麻溜
      2023-04-06
      我预览是可以的,但是真机不行
      2023-04-06
      回复
    • 牛气冲天
      牛气冲天
      2023-04-17
      iOS可以全屏但是没画面,安卓是有画面有声音,全屏播放不行
      2023-04-17
      回复
登录 后发表内容