# 直播观看小程序开发（仅直播视频播放）

## 播放界面

![示例](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-aa2d552f96c210fbaa80a59f0187f0fb72265dc3%2Fweixin03.png?alt=media)

## 开发前准备

1.小程序微信开发者后台设置-开发设置-服务器域名中配置 \[request合法域名]

![开发者后台设置](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-a94d036ada1980c4259c53d5926c8a447c13e053%2Fweixin1.png?alt=media)

## 开始开发

***

## 1.获取频道直播播放地址

index.wxml

```javascript
<view class="video-box">
  <live-player id="polyvLiveVideo" class="vp-v" src="{{video.src}}" autoplay></live-player>
</view>
```

index.js

```javascript
//引用polyvlive.js
import PolyvLive from '../../utils/polyvlive.min.js';

// 设置频道信息
// 直播后台开发设置 - 开发者信息 userId(账号ID)
const liveUid = "xxx";
// 频道号
const liveVid = "xxx";

const polyvLive = new PolyvLive();

polyvLive.getVideo({
    uid: liveUid,
    vid: liveVid,
    // 日志统计: 场次ID
    forceSessionId: true,
    // 日志统计
    statistics: {
        // 观众账号
        param1: Date.now(),
        // 观众昵称
        param2: 'polyv'
    },
    success: (videoInfo) => {
        // 调用getVideo回调
    },
    onApiStatus: (status)=>{
        // 直播状态回调
    }
});

polyvLive.getLatestLiveUrl((videoInfo)=>{
    this.setPlayerSrc(videoInfo);
});

setPlayerSrc(videoInfo) {
  this.setData({
    video: {
      src: videoInfo.flvSrc,
      poster: videoInfo.poster
    }
  });
}
```

## 2.选项说明

### uid

类型：String 说明：直播后台开发设置 - 开发者信息 userId(账号ID)

### vid

类型：String 说明：直播频道id

### forceSessionId

类型：Boolean 说明：日志统计是否包含场次id

### statistics

类型：object 说明：播放日志参数，可设置值并且直播后台观看日志查询中显示对应字段名称如下

| 参数值可选  | 说明   |
| ------ | ---- |
| param1 | 观众账号 |
| param2 | 观众昵称 |

### success（videoInfo）

类型：Function 说明：获取视频信息成功时触发 参数：videoInfo 参数类型：object 参数说明：

| 参数           | 参数说明                                                                                                        |
| ------------ | ----------------------------------------------------------------------------------------------------------- |
| src          | 视频m3u8播放地址,获取成功后设置为[video](https://mp.weixin.qq.com/debug/wxadoc/dev/component/video.html)组件的src            |
| flvSrc       | 视频flv播放地址,获取成功后设置为[live-player](https://mp.weixin.qq.com/debug/wxadoc/dev/component/live-player.html)组件的src |
| poster       | 视频封面                                                                                                        |
| title        | 视频标题                                                                                                        |
| waitImage    | 暖场图片/暖场视频,以返回链接后缀判断图片/视频类型                                                                                  |
| logoImage    | logo图片地址                                                                                                    |
| logoHref     | logo的点击跳转链接                                                                                                 |
| logoPosition | logo位于播放器位置                                                                                                 |
| logoOpacity  | logo透明度                                                                                                     |

### onApiStatus（status）

类型：Function 说明：获取视频直播/结束状态 参数：status 参数类型：String 参数说明：

| 参数   | 参数说明   |
| ---- | ------ |
| live | 直播正在进行 |
| end  | 直播结束   |

## 3.销毁播放器

```javascript
//页面处理函数
onUnload() {
  polyvLive.destroy();
}
```

## 注意事项

使用live-player组件有类目限制，需要先通过类目审核 ![1536218165(1)](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-af56856c0bd3a8f204124559e03fc4fc6a58dd92%2F15362181651.png?alt=media) 然后需要在小程序管理后台，“设置”-“接口设置”中自助开通该组件权限 ![1536218076(1)](https://6941759-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FmV4PIbrO79lRJl9HCeLg%2Fuploads%2Fgit-blob-574921939070c37ebc603420e64f2ecabe8b0513%2F15362180761.png?alt=media)

sdk默认使用live-player组件，使用flv拉流地址

```javascript
setPlayerSrc(videoInfo) {
    this.setData({
      video: {
        src: videoInfo.flvSrc, // videoInfo.flvSrc返回flv地址
        poster: videoInfo.poster
      }
    });
  }
```

如果所用小程序组件为video,则需要设置播放地址为m3u8

```javascript
<view class="video-wrap">
  <view class="video-box">
    <video id="polyvLiveVideo" class="vp-v" src="{{video.src}}" controls autoplay></video>
  </view>
</view>
```

```javascript
setPlayerSrc(videoInfo) {
    this.setData({
      video: {
        src: videoInfo.src, // videoInfo.src返回m3u8地址
        poster: videoInfo.poster
      }
    });
  }
```

[小程序直播sdk下载](https://git.polyv.net/help-center/document-center/-/blob/master/third_res/front/webappLiveSdk1.zip)
