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

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

                }

            },

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容