2.小程序开发

2.1视频播放开发示例

我们使用微信提供的 live-player组件进行视频播放，在 .wxml文件中引入该组件，我们为live-player组件指定id值，用于创建 LivePlayerContext 对象，以操作live-player组件。

live-player组件部分属性说明如下：

bindstatechange：监听播放状态变化，通过e.detail.code获取当前播放状态值，部分状态码如下所示。

mode属性默认为live(直播模式)，小程序live-player组件为实时通话模式(mode=”RTC”)，该模式时延更低。

src：您的设备播放地址，目前仅支持tmp格式。

autoplay：true表示自动播放，false表示手动播放。
cover-view组件可覆盖在live-player组件之上，用于展示“播放按钮”、”全屏按钮”等播放器辅助功能。通过hidden="{true}"进行隐藏，hidden="{false}"进行展示。

         <live-player id="previewPlayer" binderror="error" bindstatechange="statechange" mode="RTC" src=""  autoplay="true" >
         </live-player>
         <!-- 播放停止状态 -->
         <cover-view class="video-loaing video-ready" hidden="true">
             <cover-image class="loading-gif" src="../live/images/live/landscape_play.png" catchtap="handlePlay">
             </cover-image>
         </cover-view>
        
         let livePlayerContext;
         Page({
             data: {
                 videoSrc: '', // 视频播放地址
                 videoLoadingStatus: 0, // 播放按钮展示状态
             },
             onLoad: function () {
                 livePlayerContext = wx.createLivePlayerContext('previewPlayer');
                 // 调用接口获取videoSrc视频播放地址
             },
             // 播放状态监听
             statechange(e) {
             const { code } = e.detail;
             switch (code){
               case 2007: //启动loading
                 break;
               case 2001: //连接服务器 
                 break;
               case 2002: //已经连接 RTMP 服务器,开始拉流 
                    break;
               case 2008: // 解码器启动
                 console.log("case 2008: //解码器启动");
                 break;
               case 2009: //视频分辨率改动
                  console.log("case 2009: //视频分辨率改动");
                 this.handlePlay(); // 视频分辨率改动可能导致播放暂停，可调用handlePlay()重启播放
                 break;
               case 2004: 
                 console.log("case 2004: // 视频播放开始");
                 break;
               case 2003: 
                   console.log("case 2003: //网络接收到首个视频数据包(IDR)");
                   break;
               case 2103: //网络断连, 已启动自动重连（本小程序不自动重连）
                   break;
               case 3001:
               case 3002:
               case 3003:
               case 3005: // RTMP 读/写失败，之后会发起网络重试
                   console.log("播放失败");
                   break;
               case 2105: // 当前视频播放出现卡顿
                 break;
               case -2301: // 经多次重连抢救无效，更多重试请自行重启播放
                 break;
             }
           },
             // 播放按钮
               handlePlay(e){
                   livePlayerContext.play({
                   success: ()=>{
                       // Do some thing
                   },
                   fail: (error)=>{
                       // Do some thing
                   }
                   })
               },
         })

2.小程序开发

2.小程序开发#

2.1视频播放开发示例#

2.小程序开发

2.1视频播放开发示例