前言：

        我们在小程序中实现音视频-直播/录播 的播放时候，会使用到微信官方提供的两个组件，推流组件和拉流组件，这里来分享下他的拉流组件的使用和具体需要注意的点。

效果图：

1、拉流状态code日志

2、代码使用截图：

 官方文档：

live-player | 微信开放文档

 注意事项：

1、要用到 音视频，涉及直播的话小程序必须申请直播权限，不然你提审会出问题

2、音视频地址。目前仅支持 flv, rtmp 格式

3、网络的状态码中，官方文档部分是没有的，比如 2026，6000等

具体使用：

1、wxml 上使用 标签

<live-playersrc="{{url}}"orientation="{{orientation}}"object-fit="{{objectFit}}"min-cache="{{minCache}}"max-cache="{{maxCache}}"mode="{{mode}}"autoplay="{{true}}"bindstatechange="onPlayStateChange"bindnetstatus="onPlayNetStateChange"bindaudiovolumenotify="onPlayAudiovolumenotify"
></live-player>

2、js中定义变量与方法

data: {//直播地址 rtmp://58.200.131.2:1935/livetv/cetv1          http://39.134.65.162/PLTV/88888888/224/3221225611/index.m3u8url:'',orientation: 'vertical', //画面方向objectFit: 'fillCrop', //填充模式minCache: 0.2, //最小缓冲区，单位smaxCache: 0.8, //最大缓冲区，单位s（RTC 模式推荐 0.8s）。缓冲区用来抵抗网络波动，缓冲数据越多，网络抗性越好，但时延越大。mode: 'live', //模式  live是直播
}

// 播放状态变化事件
onPlayStateChange(e) {const codeArr = [{code:'2001',value:'拉流：已经连接服务器',},{code:'2002',value:'拉流：已经连接 RTMP 服务器,开始拉流',},{code:'2003',value:'拉流：网络接收到首个视频数据包(IDR)',},{code:'2004',value:'拉流：视频播放开始',},{code:'2008',value:'拉流：解码器启动',},{code:'2009',value:'拉流：视频分辨率改变',},{code:'2105',value:'拉流：当前视频播放出现卡顿',}]console.log('hx----------wx网络code：');console.log('+++++++++++++++++++++：');console.log(e.detail.code);let text = codeArr.filter(v=>v.code == e.detail.code)?codeArr.filter(v=>v.code == e.detail.code)[0].value:''console.log(text );console.log('hx----------wx网络code：');if(e.detail.code == 2001 || e.detail.code == 2002 || e.detail.code == 2008){this.triggerEvent('updateLoadingFlagHX',true)}if(e.detail.code == 2003 || e.detail.code == 2032){wx.showToast({title: '网络接收到首个视频数据包',icon: 'none',});//调用父级的方法this.triggerEvent('updateLoadingFlagHX',false)}//在这里做你的逻辑操作...},
//网络问题
onPlayNetStateChange(e) {},
// 播放声音数值
onPlayAudiovolumenotify(e) {if (e.detail.volume > 20) {// console.log(e,e.detail.volume,'采集声音')}
},

api文档：

属性说明

状态码