微信小程序直播前端实现

目前微信推出了公测版微信小程序直播，无需页面开发，只需接入文档即可
最新文档：https://blog.csdn.net/hql1024/article/details/104697973

<live-player id="player" autoplay="true" src="{{videoUrl}}" bindstatechange="statechange" binderror="error" object-fit="fillCrop" orientation="{{orientation}}" />
<!-- 透明底为了触发弹出层 --><cover-view class='transparent' wx:if="{{transparent}}" bindtap="showPop" style="height:{{height}}"></cover-view><!-- 竖屏 --><cover-view class='pop' wx:if="{{pop}}" style="height:{{height}}"><cover-image class='portrait_screen_img_bg' bindtap="closePop" style="height:{{height}}" src='http://h-cdn.zealcdn.cn/20190605180725.png'></cover-image><cover-image class='portrait_screen_img' bindtap='landscape'  src='http://h-cdn.zealcdn.cn/20190516173441.png'></cover-image></cover-view><!-- 横屏 --><cover-view class='landscape' wx:if="{{landscape}}"><cover-image class='landscape_bg' bindtap="closePop" style="height:{{height}}" src='http://h-cdn.zealcdn.cn/20190605180725.png'></cover-image><cover-view class='landscape_text'>{{title}}</cover-view><cover-image class='landscape_img' bindtap='landscape' src='http://h-cdn.zealcdn.cn/20190516173453.png'></cover-image></cover-view>

data:{videoUrl:"",orientation: 'vertical',transparent: false,pop: true,height: '440rpx',landscape: false,title: '',nav: true,
}

    // 获取直播地址wx.request({method: 'post',url: "",data: {room_id: roomid,//传递给后端的ID，相当于每个商品的ID，靠这个来显示不同的直播页面，可有可无改地方。},header: {'content-type': 'application/x-www-form-urlencoded'},success(res) {if (res.data.status == 1) {that.setData({videoUrl: res.data.xxx,})} else {wx.showToast({title: res.data.msg,icon: 'none',duration: 2000})}}})

 landscape(e) {let that = thislet orientation = that.data.orientation == 'vertical' ? 'horizontal' : 'vertical'let height = that.data.height == '440rpx' ? '100%' : '440rpx'let landscape = that.data.landscape ? false : truelet pop = that.data.pop ? false : truelet isShow = that.data.isShow ? false : truelet transparent = that.data.transparent ? true : falselet nav = that.data.nav ? false : true// 全屏以及退出全屏let player = wx.createLivePlayerContext('player')if (orientation == 'horizontal') {player.requestFullScreen({})} else {player.exitFullScreen({})}that.setData({orientation: orientation,height: height,landscape: landscape,pop: pop,isShow: isShow,transparent: transparent,nav: nav,landscape_op: false})},// 关闭弹窗closePop() {let that = thisthat.setData({pop: false,landscape: false,transparent: true,})},

css

.page-section {width: 100%;height: 100%;
}
.player_box{width: 100%;position: relative;
}
.transparent,.close{width: 100%;background: transparent;position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 5;
}
.pop {width: 100%;background: transparent;position: absolute;top: 0;left: 0;color: #fff;font-size: 28rpx;
}
.portrait_screen_img_bg,.landscape_bg{width: 100%;position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 6;
}
.portrait_screen_img{position: absolute;right: 30rpx;bottom: 20rpx;width: 50rpx;height: 50rpx;z-index: 8;overflow: visible;
}
.landscape{width: 100%;height: 100%;position: absolute;left: 0;bottom: 0;
}
.landscape_text{font-size: 28rpx;transform: rotate(90deg);word-wrap: break-word;color: #fff;z-index: 8;line-height: normal;width: 100%;height:750rpx;padding-left:130rpx;padding-top:30rpx;box-sizing:border-box;
}
.landscape_img{position: absolute;left: 30rpx;bottom: 50rpx;width: 50rpx;height: 50rpx;z-index: 8;transform: rotate(90deg);
}

微信小程序直播前端实现相关推荐

微信小程序直播功能来了，然后呢？
这是小胖的第129篇文章. 也是小胖2020年100文章的第04篇. « 腾讯小程序直播功能,弄啥来? » 很荣幸2月14日自家的小程序收到了腾讯小程序直播功能的内测邀请,今天闲下来把这个功能的前后端 ...
微信小程序直播间开发抽红包功能
1.前言微信小程序直播间开发抽红包功能微信小程序直播是微信官方提供的商家经营工具,商家可通过在小程序内直播实现用户互动与商品销售的闭环,无需任何的跳转,提高下单转化率,直播更是成为链接商家和消费者 ...
微信小程序直播开启公测了，与平台直播有何不同？小程序直播如何搭建
微信小程序直播开启公测了.在直播这个流量阵地里,每一个科技巨头,每一个零售商家,甚至是每一个个体,都渴望借助直播获得新的机遇. 1月中旬,不少商家收到小程序直播的公测邀请,并已交出了漂亮的成绩单: 完 ...
不同程序用不同网络_微信小程序直播登场，与平台直播有何不同？
星标我,不要迷路哦~ 微信小程序直播开启公测了.在直播这个流量阵地里,每一个科技巨头,每一个零售商家,甚至是每一个个体,都渴望借助直播获得新的机遇. 1月中旬,不少商家收到小程序直播的公测邀请,并已交 ...
vue和小程序哪个好学一点_litemall,Spring Boot后端，微信小程序用户前端 + Vue用户移动端...
litemall 又一个小商场系统. litemall = Spring Boot后端 + Vue管理员前端 + 微信小程序用户前端 + Vue用户移动端注意: 由于第一次加载数据量较大,建议wif ...
nfs需要开通什么端口_开通微信小程序直播需要准备什么？
原标题:开通微信小程序直播需要准备什么? 双十一活动即将开始,很多公司已经开始做活动了.使用直播工具对事件进行预热可以带来很多效益.那么,做微信小程序直播需要哪些设备呢?不妨跟着小编一起来了解一下. ...
微信小程序直播助力深圳线上购物节数百场品牌小程序开播
3月8日消息,自2月下旬微信宣布小程序直播能力公测以来,零售商家在复工复产关键时期纷纷"入局"小程序直播.微信发布消息称,3月8日"女神节"当天,数百个品牌将同 ...
微信小程序直播正式公测；刘强东 2020 年已卸任 8 家公司高管；React 16.13.0 发布| 极客头条...
整理 | 屠敏头图 | CSDN 下载自视觉中国快来收听极客头条音频版吧,智能播报由标贝科技提供技术支持. 「极客头条」-- 技术人员的新闻圈! CSDN 的读者朋友们早上好哇,「极客头条」来啦, ...
微信小程序直播有哪些推广技巧?
随着直播行业的发展,如今各大平台基本都推出了直播这个功能板块,自从微信小程序直播功能推出以来,吸引了众多商家用户前往入驻,对于刚开始做小程序直播的新手而言,一开始的流量是一个比较棘手的问题,因此想要做 ...

微信小程序直播前端实现

微信小程序直播前端实现相关推荐

最新文章

热门文章