播放界面
开发前准备
1.小程序微信开发者后台设置-开发设置-服务器域名中配置 [request合法域名]
开始开发
1.获取频道直播播放地址
index.wxml
<view class="video-box">
<live-player id="polyvLiveVideo" class="vp-v" src="{{video.src}}" autoplay></live-player>
</view>
index.js
//引用polyvlive.js
import polyvLive from '../../utils/polyvlive.js';
//设置频道信息
var liveUid = "e3wx706i3v";
var liveVid = "103915";
var liveVideoContext = wx.createLivePlayerContext('polyvLiveVideo');
polyvLive.getVideo({
uid: liveUid,
vid: liveVid,
videoContext: liveVideoContext,
success: (videoInfo) => {
// set video src and poster
this.setPlayerSrc(videoInfo);
},
error: (res) => {
//console.log(res.error);
},
onStartLive: ()=>{
// set latest video src
this.setNewPlayerSrc();
}
});
setNewPlayerSrc() {
polyvLive.getNewVideo((videoInfo)=>{
this.setPlayerSrc(videoInfo);
});
}
setPlayerSrc(videoInfo) {
this.setData({
video: {
src: videoInfo.flvSrc,
poster: videoInfo.poster
}
});
}
选项说明
uid
类型：String
说明：直播账户id
vid
类型：String
说明：直播频道id
videoContext
类型：String
说明：视频组件控制，详情查看
params
类型：object
说明：播放日志参数，可设置值并且直播后台观看日志查询中显示对应字段名称如下
| 参数值可选 | 说明 |
|---|---|
| param1 | 用户ID |
| param2 | 昵称 |
success（videoInfo）
类型：Function
说明：获取视频信息成功时触发
参数：videoInfo
参数类型：object
参数说明：
| 参数 | 参数说明 |
|---|---|
| src | 视频m3u8播放地址,获取成功后设置为video组件的src |
| flvSrc | 视频flv播放地址,获取成功后设置为live-player组件的src |
| poster | 视频封面 |
| title | 视频标题 |
| waitImage | 暖场图片/暖场视频,以返回链接后缀判断图片/视频类型 |
| logoImage | logo图片地址 |
| logoHref | logo的点击跳转链接 |
| logoPosition | logo位于播放器位置 |
| logoOpacity | logo透明度 |
error（res）
类型：Function
说明：获取视频信息失败时触发
参数：res
参数类型：object
参数说明：
| 参数 | 参数说明 |
|---|---|
| code | 错误状态码 |
| error | 错误详细说明 |
onApiStatus（status）
类型：Function
说明：获取视频直播/结束状态
参数：status
参数类型：String
参数说明：
| 参数 | 参数说明 |
|---|---|
| live | 直播正在进行 |
| end | 直播结束 |
onStartLive （）
类型：Function
说明：直播从结束状态切换至开始状态触发
2.绑定播放进度变化
//事件处理函数
timeUpdate: function(e) {
//bind timeUpdate Event
polyvLive.timeUpdate(e);
}
ps：注意播放进度绑定事件中e参数为必须项 (若使用live-player组件则不需绑定)
3.销毁播放器
//页面处理函数
onUnload() {
polyvLive.destroy();
}
注意事项
使用live-player组件有类目限制，需要先通过类目审核
然后需要在小程序管理后台，“设置”-“接口设置”中自助开通该组件权限
sdk默认使用live-player组件，使用flv拉流地址
setPlayerSrc(videoInfo) {
this.setData({
video: {
src: videoInfo.flvSrc, // videoInfo.flvSrc返回flv地址
poster: videoInfo.poster
}
});
}
如果所用小程序组件为video,则需要设置播放地址为m3u8
<view class="video-wrap">
<view class="video-box">
<video id="polyvLiveVideo" class="vp-v" src="{{video.src}}" controls autoplay></video>
</view>
</view>
setPlayerSrc(videoInfo) {
this.setData({
video: {
src: videoInfo.src, // videoInfo.src返回m3u8地址
poster: videoInfo.poster
}
});
}
Loading...