小程序rtmp监控视频播放

//wxml
<view class="wrap">
 <live-player id="live-player-id"   class='{{winstyle}}' src="rtmp://" mode="live/RTC" autoplay bindstatechange="playerstatechange" binderror="error">
    <cover-view class='full_img_idv' bindtap="fullScreen">
    <!-- 缩小--> <cover-view wx:if="{{fullScreenFlag}}"> <cover-image src="../../images/close.png" class='full_img' /> </cover-view>
    <!-- 放大 --> <cover-view wx:else> <cover-image src="../../images/ischeck.png" class='full_img' /> </cover-view> </cover-view> </live-player> </view> //js const app=getApp() Page({ data: { fullScreenFlag: false, }, onReady(res) { this.ctx = wx.createLivePlayerContext('live-player-id') }, onLoad:function(){ }, //放大缩小 fullScreen: function () { var fullScreenFlag = this.data.fullScreenFlag; if (fullScreenFlag) { fullScreenFlag = false; } else { fullScreenFlag = true; } if (fullScreenFlag) { this.ctx.requestFullScreen() this.setData({ fullScreenFlag: fullScreenFlag }) } else { this.ctx.exitFullScreen() this.setData({ fullScreenFlag: fullScreenFlag }) } }, //live-player返回状态码 playerstatechange(e) { console.log('live-player code:', e.detail.code) }, error(e) { console.error('live-player error:', e.detail.errMsg) }, }) //wxss live-player { 100%; height: 225px; position: relative; } live-pusher{ 100%; height: 225px; } .full_img_idv{ position: absolute; right: 30rpx; bottom: 30rpx; } .full_img { 40rpx; height: 40rpx; } .page-body-button { margin-bottom: 30rpx; }
原文地址:https://www.cnblogs.com/minghan/p/13330939.html