https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/industry/liveplayer/live-player-plugin.html
https://docs.qq.com/doc/DZHhzV0FiYXRQV01i
不能用<live-player>，因为live-player的src要赋值rtmp格式流视频文件，而<navigator>对应的小程序插件只需要从接口获取房间号和图片即可，但首页无法实现一开始的小窗口播放，只能在点开全屏播放后后退会出现小窗浮层
manifest.json:
"mp-weixin" : { "appid" : "wx25......", "setting" : { "urlCheck" : false, "es6" : false, "postcss" : false, "minified" : true }, "plugins": { "live-player-plugin": { "version": "1.3.5", "provider": "wx2b03c6e691cd7370" } }, "usingComponents" : true, "permission" : {}, "lazyCodeLoading" : "requiredComponents" },
pages.json:
{ "pages": [ { "path": "pages/index/index", "name":"index", "style": { "navigationStyle": "custom", "navigationBarTitleText": "首页", "app-plus": { "bounce": "vertical", "titleNView": { "autoBackButton":"true" } }, "usingComponents": { "subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe" } } } ], "globalStyle": { "navigationBarTextStyle": "black", "navigationBarTitleText": "网", "navigationBarBackgroundColor": "#F7F5F6", "backgroundColor": "#F7F5F6", "app-plus": { "titleNView": { "backgroundImage":"#00b4ed" } } }, "lazyCodeLoading":"requiredComponents" }
index.vue:
<template> <view class="container"> <view v-show="liveFlag"> <view class="zhibo"> <view class="zhibo_right"> <view class="live" > <navigator :url="live.url" style=" height: 100%;"> <view class="liveBtn" >直播中</view> <image class="liveImg" :src="live.curUrl" mode="aspectFill"></image> </navigator> </view> </view> </view> </view> <view class="bottomV"></view> <Tabbar></Tabbar> </view> </template> <script>// let livePlayer = requirePlugin('live-player-plugin') export default { name:'index', components: {}, data() { return { title:'首页', liveFlag:false, live:{ url:'', autoplay:'true', mode:'live', picture:["push", "pop"], roomId:0, customParams:'', curUrl:'' } } }, onLoad() { //console.log('1') //监听页面加载，参数为上一个页面传递的数据，类型为Object }, onShow(){ //console.log('2') //监听页面的显示，页面每次出现在屏幕上都会触发this.getDate(); }, methods: {
//无用 activeLive(){ this.live.customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断） var curUrl = 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + this.live.roomId + '&custom_params=' + this.live.customParams wx.navigateTo({ url: curUrl }) }, getDate(){ uni.request({ url: this.$httpUrl.HomeDataGetList, method: 'POST', header:{ 'Content-Type': 'application/x-www-form-urlencoded', }, success: (res) => { // console.log(res) if (res.data.s.co === 1) { let info = res.data.d.rd; //console.log(info) //5直播 info.forEach((item,index)=>{ if(item.Classify == 5){ this.liveFlag = true this.live.roomId = Number(item.Url) //获取到房间号 this.live.curUrl = item.ImgUrl //获取到主播上传照片 // this.live.curUrl = 'http://img.myqpw.com/a/5/2/9/4/8/5121359236477258585.jpg'//'https://img.myqpw.com/mini/static/image/head.jpg' this.live.url = 'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=' + this.live.roomId + '&type=10' // livePlayer.getSubscribeStatus({ room_id: this.live.roomId }).then(res => { // console.log('房间号：', res.room_id) // console.log('订阅用户openid', res.openid) // console.log('是否订阅', res.is_subscribe) // }).catch(err => { // console.log('get subscribe status', err) // }) } }) } else { // uni.showToast({ // title: res.data.s.mg, // icon: "none", // duration: 2000 // }); } } }) } } } </script> <style lang="scss" scoped> .container { .zhibo{ display: flex; .zhibo_right{ width:50%; margin-top:20rpx; .live{ position:relative; height:100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; flex-direction: column; margin-right:20rpx; .liveBtn{ position: absolute; top:10rpx; left:10rpx; z-index: 1; width: 100rpx; height: 40rpx; line-height: 40rpx; border: none; border-radius: 20rpx; font-size: 24rpx; color:#FFFFFF; text-align: center; background: linear-gradient(90deg, rgba(180, 101, 218, 1) 0%, rgba(207, 108, 201, 1) 33%, rgba(238, 96, 156, 1) 66%, rgba(238, 96, 156, 1) 100%) !important; } .liveImg{ width:100%; height:100%; border-radius:15rpx; } } } } } </style>