解决小程序直播组件live-player全屏问题

链接: 官网live-player.

小程序自带组件live-player并没有提供全屏按钮，需要自己手写全屏和退出全屏

实现思路：点击视频显示放大图标点击放大和缩小图标调用对应api

代码
wxml

<view bindtap="showFull"><view class="live-video" bindtap="showFull"><live-player id="livePlayer" src="rtmp://devlivepull.migucloud.com/live/05XP3YWQ_C0" mode="live" autoplay bindstatechange="statechange" binderror="error"><view class='full_img_idv' catchtap="hideFull" wx:if="{{showControls}}"><view class="col-box" bindtap="unFullScreen" wx:if="{{fullScreenFlag}}"><image src="../images/unfold.png" class='full_img' /></view><view class="col-box" wx:else bindtap="onFullScreen"><image src="../images/fold.png" class='full_img' /></view></view></live-player></view>
</view>


Page({data: {fullScreenFlag: false,showControls: false,LivePlayerContext: ''},onLoad() {},showFull() {this.setData({showControls: true})},hideFull() {this.setData({showControls: false})},onFullScreen() {let that = thisthis.data.LivePlayerContext = wx.createLivePlayerContext('livePlayer')this.data.LivePlayerContext.requestFullScreen({direction: 90,success(e) {that.setData({fullScreenFlag: true})},fail(e) {console.log(e)},complete(e) {console.log(e)}})},unFullScreen() {let that = thisthis.data.LivePlayerContext.exitFullScreen({success(e) {that.setData({fullScreenFlag: false})},})},statechange(e) {console.log('live-player code:', e.detail.code)},error(e) {console.error('live-player error:', e.detail.errMsg)}
})

wxss

#livePlayer {width: 100%;height: 211px;
}.full_img_idv {width: 100%;height: 100%;display: flex;align-items: flex-end;justify-content: flex-end;background:rgba(0, 0, 0, 0.2);
}
.full_img {width: 20px;height: 20px;margin-right: 20rpx;margin-bottom: 20rpx;
}

demo链接：点击微信小程序开发工具打开

live-player在开发者工具上暂不支持，可通过真机播放。AppId需开通相关权限才可正常播放。
开通相关权限：暂只针对国内主体如下类目的小程序开放，需要先通过类目审核，再在小程序管理后台，「开发」-「接口设置」中自助开通该组件权限。（链接: 官网live-player.）

解决小程序直播组件live-player全屏问题相关推荐

完美解决小程序直播组件live-player全屏问题
小程序自带组件live-player并没有提供全屏按钮,需要自己手写开发这里给大家分享一下自己的代码遇到的坑:cover-view在安卓中不生效,可以直接用view代替实现思路:点击视频显示 ...
即构微信小程序直播组件是什么？有哪些功能？哪些小程序类目可以使用？
即构直播助手是微信官方认证的微信小程序插件,为开发者提供便捷.强大的微信小程序音视频直播服务. 即构直播助手除了包含微信小程序下的音视频推拉流能力,还支持iOS.Android.Windows.Web ...
uniapp引入微信小程序直播组件
在manifest.json配置即可,与直接在小程序代码中引入相同. 1. 在工程的manifest.json文件中引入直播插件 "mp-weixin" : {/* 小程序特有相关 ...
解决小程序swiper组件轮播指示点颜色设置“无效”的问题
文章目录前言内容发现问题分析问题解决问题总结前言本文章写给在开发微信小程序过程中,使用swiper组件,按照文档设置了指示点自定义颜色却"无效"的同学. 内容发现 ...
微信小程序轮播图放大全屏预览（爆料）
轮播图放大预览效果的实现前言一.wx.previewImage接口API 官方介绍: 代码示例: 二.图片全屏预览 1.效果展示 2.编码 img.wxml img.js img.wxss 三.轮 ...
【愚公系列】2022年09月微信小程序-图片加载和全屏适配问题
文章目录前言一.图片加载二.适配机型实现全屏背景图前言在使用图片问题中可能会遇到各种各样的问题,比如图片加载不出来,图片显示在不同机型效果不同,图片加载展示问题等等. 微信小程序image相 ...
微信小程序背景图片铺满全屏
效果图: 示例代码: 总结: 全屏的秘诀在于: background-size: 100% 100%; 阅读完有任何问题,联系我微信:ichatme002,备注来自[CSDN]
相邻位数字差值的绝对值不能超过77_微信小程序直播怎么用和挣钱？4位内测CEO答5大关键问题...
2月17日,多方消息显示,微信正式启动了小程序直播组件的公测.点开(微信小程序直播公测!开发只需1天,运营仅20分钟就上手)这篇文章可以查看操作详情. 现在,相信不少数的商家有接到公测通知了.这时,如 ...
微信小程序直播如何接入？开源代码接入案例分享
小程序直播组件接入指引一.简介小程序直播,是微信提供给小程序开发者的直播组件.通过调用该组件,商家可以在小程序中实现直播功能. 按下面的使用说明接入,在你的小程序中引入直播组件. 二.使用方法说明 ...
微信小程序直播开启公测了，与平台直播有何不同？小程序直播如何搭建
微信小程序直播开启公测了.在直播这个流量阵地里,每一个科技巨头,每一个零售商家,甚至是每一个个体,都渴望借助直播获得新的机遇. 1月中旬,不少商家收到小程序直播的公测邀请,并已交出了漂亮的成绩单: 完 ...

解决小程序直播组件live-player全屏问题

解决小程序直播组件live-player全屏问题相关推荐

最新文章

热门文章