1.

需要下载可执行的源代码的，请点我：https://github.com/firefac/p-media-livePlayer

2.

废话不多说，上代码。

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.wmlwxsmodule"dateUtil"src"../../../utils/timeUtil.wxs"/wxsviewclass"container"van-tabsbind:change"switchCate"active"{{tabIndex}}"van-tabtitle"直播"viewclass"noContent"wx:if"{{rooms.length0}}"van-iconname"bullhorn-o"size"120rpx"/view没有更多直播啦～～/view/viewviewclass"live-container"viewclass"item"wx:for"{{rooms}}"wx:for-index"index"wx:for-item"item"wx:key"id"navigatorurl"plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id{{item.roomid}}"viewclass"img-container"imageclass"img"src"{{item.anchorImg}}"mode"aspectFill"/imageviewclass"label"{{liveStatus[item.liveStatus]}}/view/view/navigatorviewclass"bottom"viewclass"text"navigatorurl"plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id{{item.roomid}}"class"header"textclass"name"{{item.name}}/texttextwx:if"{{item.anchorName!''}}"class"desc"主播：{{item.anchorName}}/texttextclass"desc"直播时间：{{dateUtil.dateFormat(item.startTime)}}-{{dateUtil.dateFormat(item.endTime)}}/text/navigatorviewclass"subscribe"wx:if"{{item.liveStatus102}}"subscriberoom-id"{{item.roomid}}"/subscribe/view/view/view/view/view/van-tabvan-tabtitle"已结束"viewclass"finished-live-container"viewclass"item"wx:for"{{finishedRooms}}"wx:for-index"index"wx:for-item"item"wx:key"id"imageclass"img"src"{{item.anchorImg}}"mode"aspectFit"background-size"cover"/imageviewclass"right"navigatorurl"plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id{{item.roomid}}"viewclass"text"textclass"name"{{item.name}}/texttextwx:if"{{item.anchorName!''}}"class"desc"主播：{{item.anchorName}}/texttextclass"desc"直播时间：{{dateUtil.dateFormat(item.startTime)}}-{{dateUtil.dateFormat(item.endTime)}}/text/view/navigatorviewclass"opration"wx:if"{{item.liveRoomReplyList.length0}}"van-buttontype"info"size"small"data-room"{{item}}"bind:click"showHistoryPopup"观看回放/van-button/view/view/view/view/van-tab/van-tabsvan-popupshow"{{historyShow}}"bind:close"onClose"videosrc"{{liveHistoryRoom.mediaUrl}}"/video/van-popup!--联系客服--viewclass"contact"contact-buttonstyle"opacity:0;position:absolute;"type"default-dark"session-from"weapp"size"27"/contact-button/view/viewlivePlayer.jsvarutilrequire('../../../utils/util.js');varapirequire('../../../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(){letthatthis;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(){letthatthis;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.pageNum1){that.syncLiveStatus(that.data.rooms[0])}if(res.data.list.lengththat.data.pageSize){that.data.lastPagetrue}}});},syncLiveStatus:function(room){if(roomnull){return}letthatthisletlivePlayerrequirePlugin('live-player-plugin')//引入获取直播状态接口//首次获取立马返回直播状态，往后间隔1分钟或更慢的频率去轮询获取直播状态livePlayer.getLiveStatus({room_id:room.roomid}).then(res{//101:直播中,102:未开始,103:已结束,104:禁播,105:暂停中,106:异常,107：已过期constliveStatusres.liveStatusif(room.liveStatus!liveStatus){letroomsthat.data.roomsrooms[0].liveStatusliveStatusthat.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(){letthatthis;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.lengththat.data.finishedRoomsPageSize){that.data.finishedRoomsLastPagetrue}}});},showHistoryPopup:function(e){varroome.currentTarget.dataset.roomthis.setData({historyShow:true,liveHistoryRoom:room.liveRoomReplyList[0]});},onClose(){this.setData({historyShow:false,liveHistoryRoom:{}});},onReachBottom(){if(this.data.tabIndex0){if(this.data.lastPage){wx.showToast({title:'没有更多直播了',icon:'none',duration:2000});returnfalse;}else{this.data.pageNumthis.data.pageNum+1this.getRoomsList();}}elseif(this.data.tabIndex0){if(this.data.finishedLastPage){wx.showToast({title:'没有更多内容了',icon:'none',duration:2000});returnfalse;}else{this.data.finishedPageNumthis.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,'HeitiSC';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:1pxsolid#d9d9d9;margin:020rpx;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:rownowrap;}.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:20rpx20rpx0rpx0rpx;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:55rpxauto;padding:160rpx0rpx;border-radius:20rpx20rpx0rpx0rpx;}.live-container.bottom{width:100%;display:flex;flex-flow:rownowrap;box-shadow:0px2px4px1px#DDD;border-radius:0rpx0rpx20rpx20rpx;}.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-repeatcenter21rpx;background-size:55rpxauto;}