需要下载可执行的源代码的，请点我：https://github.com/firefac/p-media-livePlayer
废话不多说，上代码。
liveplayer.json
{"navigationBarTitleText": "直播演示","usingComponents": {"van-tab": "../../lib/tab/index","van-tabs": "../../lib/tabs/index","van-card": "../../lib/card/index","van-button": "../../lib/button/index","subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe","van-icon": "../../lib/icon/index","van-popup": "../../lib/popup/index"}
}livePlayer.wml
<wxs module="dateUtil" src="../../../utils/timeUtil.wxs"></wxs><view class="container"><van-tabs bind:change="switchCate" active="{{tabIndex}}"><van-tab title="直播"><view class="noContent" wx:if="{{rooms.length == 0}}"><van-icon name="bullhorn-o" size="120rpx" /><view>没有更多直播啦～～</view></view><view class="live-container"><view class="item" wx:for="{{rooms}}" wx:for-index="index" wx:for-item="item" wx:key="id"><navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{item.roomid}}"><view class="img-container"><image class="img" src="{{item.anchorImg}}" mode="aspectFill"></image><view class="label">{{liveStatus[item.liveStatus]}}</view></view></navigator><view class="bottom"><view class="text"><navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{item.roomid}}" class="header"><text class="name">{{item.name}}</text><text wx:if="{{item.anchorName != ''}}" class="desc">主播：{{item.anchorName}}</text><text class="desc">直播时间：{{dateUtil.dateFormat(item.startTime)}} - {{dateUtil.dateFormat(item.endTime)}}</text></navigator><view class="subscribe" wx:if="{{item.liveStatus == 102}}"><subscribe room-id="{{item.roomid}}"></subscribe></view></view></view></view></view></van-tab><van-tab title="已结束"><view class="finished-live-container"><view class="item" wx:for="{{finishedRooms}}" wx:for-index="index" wx:for-item="item" wx:key="id"><image class="img" src="{{item.anchorImg}}" mode="aspectFit" background-size="cover"></image><view class="right"><navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{item.roomid}}"><view class="text"><text class="name">{{item.name}}</text><text wx:if="{{item.anchorName != ''}}" class="desc">主播：{{item.anchorName}}</text><text class="desc">直播时间：{{dateUtil.dateFormat(item.startTime)}} - {{dateUtil.dateFormat(item.endTime)}}</text></view></navigator><view class="opration" wx:if="{{item.liveRoomReplyList.length > 0}}"><van-button type="info" size="small" data-room="{{item}}" bind:click="showHistoryPopup">观看回放</van-button></view></view></view></view></van-tab></van-tabs><van-popup show="{{ historyShow }}" bind:close="onClose"><video src="{{liveHistoryRoom.mediaUrl}}"></video></van-popup><!-- 联系客服 --><view class="contact"><contact-button style="opacity:0;position:absolute;" type="default-dark" session-from="weapp" size="27"></contact-button></view>
</view>livePlayer.js
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');Page({data: {rooms:[],historyShow: false,tabIndex: 0,pageNum: 1,pageSize: 5,lastPage: false,finishedRooms:[],finishedPageNum: 1,finishedPageSize: 5,finishedLastPage: false,liveHistoryRoom: {},liveStatus: {101: "直播中",102: "未开始",103: "已结束",104: "禁播",105: "暂停中",106: "异常",107: "已过期"}},onLoad: function () { this.getRoomsList(); this.getFinishedRoomsList(); },// 页面分享onShareAppMessage: function() {let that = this;return {title: "快来费尔工坊一起玩直播吧",path: 'pages/tools/livePlayer/livePlayer'}},onPullDownRefresh() {wx.showNavigationBarLoading() //在标题栏中显示加载this.resetData();this.getRoomsList();this.getFinishedRoomsList(); wx.hideNavigationBarLoading() //完成停止加载wx.stopPullDownRefresh() //停止下拉刷新},resetData: function() {this.setData({rooms:[],pageNum: 1,lastPage: false,finishedRooms:[],finishedPageNum: 1,finishedLastPage: false})},getRoomsList: function() {let that = this;util.request(api.LiveRoomList, {statusList: [101, 102, 105, 106],sort: "asc",pageNum: this.pageNum,pageSize: this.pageSize}, "POST").then(function(res) {if (res.errcode === '0') {that.setData({rooms: that.data.rooms.concat(res.data.list)})if(that.data.pageNum == 1){that.syncLiveStatus(that.data.rooms[0])}if(res.data.list.length < that.data.pageSize){that.data.lastPage = true}}});},syncLiveStatus: function(room) {if(room == null){return}let that = thislet livePlayer = requirePlugin('live-player-plugin') // 引入获取直播状态接口// 首次获取立马返回直播状态，往后间隔1分钟或更慢的频率去轮询获取直播状态livePlayer.getLiveStatus({ room_id: room.roomid }).then(res => {// 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常, 107：已过期 const liveStatus = res.liveStatusif(room.liveStatus != liveStatus){let rooms = that.data.roomsrooms[0].liveStatus = liveStatusthat.setData({rooms: rooms})util.request(api.LiveRoomStatusUpdate, {id: room.id,roomid: room.roomid,liveStatus: liveStatus}, "POST").then(function(res) {});}}).catch(err => {console.log(err)})},getFinishedRoomsList: function() {let that = this;util.request(api.LiveRoomList, {statusList: [103, 104, 107],pageNum: this.pageNum,pageSize: this.pageSize}, "POST").then(function(res) {if (res.errcode === '0') {that.setData({finishedRooms: that.data.finishedRooms.concat(res.data.list)})if(res.data.list.length < that.data.finishedRoomsPageSize){that.data.finishedRoomsLastPage = true}}});},showHistoryPopup: function(e){var room = e.currentTarget.dataset.roomthis.setData({historyShow: true,liveHistoryRoom: room.liveRoomReplyList[0]});},onClose() {this.setData({historyShow: false,liveHistoryRoom: {}});},onReachBottom() {if(this.data.tabIndex == 0){if(this.data.lastPage){wx.showToast({title: '没有更多直播了',icon: 'none',duration: 2000});return false;}else{this.data.pageNum = this.data.pageNum + 1this.getRoomsList();}}else if(this.data.tabIndex == 0){if(this.data.finishedLastPage){wx.showToast({title: '没有更多内容了',icon: 'none',duration: 2000});return false;}else{this.data.finishedPageNum = this.data.finishedageNum + 1this.getFinishedRoomsList();}}},switchCate: function(event) {this.setData({tabIndex: event.detail.name})},onReady: function() {// 页面渲染完成},onShow: function() {// 页面显示},onHide: function() {// 页面隐藏},onUnload: function() {// 页面关闭}
})livePlayer.wxss
.container {background: #fff;
}view, text {font-family: PingFangSC-Light, helvetica, 'Heiti SC';font-size: 29rpx;
}.finished-live-container{justify-content: space-between; flex-wrap:wrap;box-sizing: content-box;background: #fff;width: 100%;
}
.finished-live-container .item {border-bottom: 1px solid #d9d9d9;margin: 0 20rpx;height: 264rpx;
}.finished-live-container .img {margin-top: 12rpx;margin-right: 12rpx;float: left;width: 32%;height: 240rpx;
}.finished-live-container .right {float: left;height: 264rpx;width: 65%;flex-flow: row nowrap;
}.finished-live-container .text {display: flex;flex-wrap: nowrap;flex-direction: column;justify-content: center;overflow: hidden;height: 180rpx;
}.finished-live-container .name {display: block;color: #333;line-height: 40rpx;font-size: 32rpx;
}.finished-live-container .desc {display: block;color: #666;line-height: 32rpx;font-size: 25rpx;
}.finished-live-container .price {display: block;color: #ab956d;line-height: 50rpx;font-size: 33rpx;
}.live-container {width: 750rpx;height: 100%;overflow: hidden;padding: 20rpx;
}.live-container .item {width: 100%;background: #fff;margin-bottom: 25rpx;
}.live-container .img-container{height: 420rpx;position: relative;
}.live-container .img {width: 100%;height: 420rpx;background: #fff;border-radius: 20rpx 20rpx 0rpx 0rpx;position: absolute;
}.live-container .label {height: 100%;width: 100%;background-color: rgba(0,0,0,0.3);text-align: center;color: #fff;position: absolute;font-size: 40px;background-size: 55rpx auto;padding: 160rpx 0rpx;border-radius: 20rpx 20rpx 0rpx 0rpx;
}.live-container .bottom {width: 100%;display: flex;flex-flow: row nowrap;box-shadow: 0px 2px 4px 1px #DDD;border-radius: 0rpx 0rpx 20rpx 20rpx;
}.live-container .text {padding: 20rpx;width: 100%;
}.live-container .name {width: 100%;display: block;color: #333;line-height: 50rpx;font-size: 32rpx;overflow: hidden;
}.live-container .capsule-tag {float: right;padding-right: 0rpx;padding-top: 8rpx;
}.live-container .zan-capsule + .zan-capsule {margin-left: 10px;
}.live-container .desc {width: 100%;display: block;color: #666;line-height: 40rpx;font-size: 28rpx;overflow: hidden;
}.live-container .subscribe {padding-top: 30rpx;
}.noContent{display: block;line-height: 80rpx;text-align: center;margin-top: 100rpx;font-size: 30rpx;color: #666666;
}.contact {height: 100rpx;width: 100rpx;border-radius: 100%;position: fixed;bottom: 96rpx;right: 20rpx;font-size: 20rpx;box-sizing: border-box;background: url("https://firefac-1259431066.picsh.myqcloud.com/5ufjlp0rw68jen3pctjha6kk6jl6v4x9.png") no-repeat center 21rpx;background-size: 55rpx auto;
}
