直播观看小程序开发

播放界面


开发前准备

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


开始开发


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

index.wxml

<view class="video-box">
    <video id="polyvLiveVideo" class="vp-v" src="{{video.src}}" bindtimeupdate="timeUpdate"></video>
</view>

index.js

//引用polyvlive.js
var polyvLive = require('../../utils/polyvlive.js');

//设置频道信息
var liveUid = "e3wx706i3v";
var liveVid = "103915";
var liveVideoContext = wx.createVideoContext('polyvLiveVideo');

polyvLive.getVideo({
    uid: liveUid,
    vid: liveVid,
    videoContext: liveVideoContext,
    success:function(videoInfo){
        // set video src and poster
        that.setData({
            video: {
                src: videoInfo.src,
                poster: videoInfo.poster
            }
        });
    },
    error:function(res){
        //console.log(res.error);
    }
});

选项说明

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 直播结束

2.绑定播放进度变化
//事件处理函数
timeUpdate: function(e) {
    //bind timeUpdate Event
    polyvLive.timeUpdate(e);
}

ps:注意播放进度绑定事件中e参数为必须项

小程序直播sdk下载

以上内容是否对您有帮助?根本没有帮助文档较差文档一般文档不错文档很好
Loading...