微信小程序的直播回放

171 阅读1分钟

首先根据拿到的直播数据来判断当前直播间状态,点击传入当前直播间房间ID

<view>
	<u-button type="primary" v-if="item.live_status == 101" @click="goLive(item.roomid)">进入直播</u-button>
	<u-button type="primary" v-if="item.live_status == 102">等待开播</u-button>
	<u-button type="primary" v-if="item.live_status == 103"
            @click="playBack(item.roomid)">查看回放</u-button>
	<u-button type="primary" v-if="item.live_status == 104">禁播</u-button>
	<u-button type="primary" v-if="item.live_status == 105">直播暂停</u-button>
	<u-button type="primary" v-if="item.live_status == 106">直播异常</u-button>
	<u-button type="primary" v-if="item.live_status == 107">已过期</u-button>
</view>

点击进入进入直播间 跳转至直播页面

goLive(roomid) {
    let customParams = encodeURIComponent(JSON.stringify({
            path: 'pages/index/index',
            pid: 1
    }))
    wx.navigateTo({
        url: `plugin-private://wx2b03c6e691cd7370/pages/mylive/mylive?room_id=${roomid}&custom_params=${customParams}`
    })
}

查看回放

playBack(roomid) {
	uni.request({
	// #ifdef H5
	url: '/api/接口',
	// #endif
	// #ifdef MP-WEIXIN
	url: 'http://192.168.1.176/myttp/public/index.php/接口',
	// #endif
	method: "POST",
	data: {
            //传入房间号
            roomid: roomid
	},
	success: (res) => {
          //回放的所有房间
		let arr = Object.values(res.data.data)
		//获取到对应的房间的回放地址url然后传递给回放页面
		uni.navigateTo({
			url: `/pages/index/playback/playback?url=${url}`
		})
        }
    })
}

在回放页面的onLoad生命周期拿到地址栏传递过来的URL地址直接放入video标签进行显示 屏幕截图 2023-12-06 091418.png