产品文档 点播技术文档 微信小程序 点播SDK

微信小程序 点播SDK

概述

小程序点播sdk提供一套点播播放组件,供用户快速实现小程序点播业务。

说明:由于微信对域名绑定小程序限制,我们将不提供小程序嵌入H5页面业务域名配置与校验文件放置,请悉知。由于微信会对小程序做不定期规则调整,为保证小程序业务正常,请及关注与更新小程序SDK版本。

SDK 下载地址

准备工作

SDK代码地址 http://git.baijiashilian.com/open-frontend/player-weixin

1)sdk放到项目根目录下(不要改文件名字和路径)

2)使用组件的页面先注册组件

3) 小程序后台配置request合法域名

由于微信小程序SDK内部也需要通信,故需要用户配置request合法域名:

https://www.baijiayun.com
启用专属域名的客户请配置为专属域名。 
(专属域名从百家云账号中心获取。如: https://demo.at.baijiayun.com)

小程序点播sdk 从0.1.2版本开始支持专属域名设置。

初始化

使用方法


<BJYPlayer vid="{{vid}}" autoplay="{{autoplay}}" controls="{{controls}}" rememberPlay="{{rememberPlay}}" showProgress="{{showProgress}}" userNumber="{{userNumber}}" userName="{{userName}}" showPlayBtn="{{showPlayBtn}}" showRateSelection="{{showRateSelection}}" showDefinitionSelection="{{showDefinitionSelection}}" showCenterPlayBtn="{{showCenterPlayBtn}}" customPlayerImg="{{customPlayerImg}}" customPlayerBtn="{{customPlayerBtn}}" token="{{token}}" direction="{{direction}}" poster="{{poster}}" env="" apiOrigin="{{apiOrigin}}> </BJYPlayer>

参数说明

参数 类型 必填 默认 说明 最低版本tag
vid String - 视频ID
token String - 后端给的
apiOrigin String - 专属域名,可在百家云后台账户中心查询 0.1.2
autoplay Boolean true 是否自动播放 0.0.1
rememberPlay Boolean true 是否开启记忆播放功能 0.0.3
userName String 用户名, 主要用于数据统计
userNumber String 用户number, 主要用于数据统计
showRateSelection Boolean true 是否显示倍速选择 0.0.1
showDefinitionSelection Boolean true 是否显示清晰度选择 0.0.1
currentDefinition String 初始清晰度设置,不填则为后台返回的默认清晰度设置 0.0.1
currentRate Number 1.0 初始倍速设置,可以设置的值 0.5、0.8、1.0 、1.25 、1.5 0.0.1
poster String 视频封面,不设置默认为视频首帧 0.0.1
showCenterPlayBtn Object true 是否显示视频中间的播放按钮 0.0.4
customPlayerImg Object {url: '', css: ''} 自定义中间播放按钮图片和样式(小程序自身bug ios上设置宽高无效仅显示图片原始宽高),会覆盖原生播放按钮 0.0.5
customPlayerBtn Object {content: '', css: ''} 自定义中间播放按钮(非图片)的文字内容和样式 0.0.5

播放按钮设置

// 是否显示视频中间的播放按钮
showCenterPlayBtn: true,
// 自定义中间播放按钮图片,会覆盖原生播放按钮
customPlayerImg: {
    // 图片按钮,为空不显示
    url: '/demo/index/player-btn.png',
    // 自定义中间播放按钮样式 'width: 32px;height: 32px;' ios小程序自身原因 宽高设置无效 可自定义位置以下为垂直水平居中
    css: 'width: 32px; height: 32px; left:0; right:0; bottom:0; top:0; margin: auto;'
},
// 自定义播放器按钮(非图片),会覆盖原生播放按钮且可修改大小
customPlayerBtn: {
    // 按钮文本,为空不显示
    content: '▶ 开始播放',
    // 按钮样式 设置border 模拟器上会显示重合线条,真机不会显示(小程序自身bug)
    css: 'color: #fff; left:0; right:0; bottom: 10px; margin: auto; font-size: 16px; width: 100px; height: 40px; line-height: 40px; background: transparent; border: 1px solid #fff;',
}

播放器暂停播放事件

// 自定义播放
customPlay: function () {
    var me = this;
    me.selectComponent('#bjy-player').customPlay();
},
// 自定义暂停
customPause: function () {
    var me = this;
    me.selectComponent('#bjy-player').customPause();
},
// 自定义seek,单位秒
customSeek: function () {
    var me = this;
    me.selectComponent('#bjy-player').customSeek(10);
},
// 自定义stop
customStop: function () {
    var me = this;
    me.selectComponent('#bjy-player').customStop();
},

小程序video标签自带属性配置可以通过参数透传 具体参数见
https://developers.weixin.qq.com/miniprogram/dev/component/video.html

change log

  • tag0.0.1

    初始版本,支持倍速、分辨率选择、记忆播放、水印显示等功能

  • tag0.0.2

    自动播放+记忆播放调整为不需要点击确定跳转,自动从记忆时间点播放

  • tag0.0.3

    自动播放ios兼容性处理,清晰度切换bugfix 备注:因微信小程序自身原因,部分版本较低的安卓系统无法使用倍速切换和清晰度切换

  • tag0.0.4

    新增设置原生播放按钮是否显示,自定义播放按钮图片以及样式

  • tag0.0.5

    修改设置图片播放按钮字段结构,新增设置文字播放按钮(可修改大小),提供customPlay(), customPause() 播放和暂停视频

  • tag0.0.6

    新增异步获取视频信息初始化播放器

  • tag0.0.7

    上报信息区分iOS/android + 上报seek信息

  • tag0.0.8

    支持播放m3u8格式视频+上报规则调整(联系百家云销售修改默认视频格式)备注:m3u8在模拟器上无法播放,模拟器默认获取mp4格式视频

  • tag0.0.9

    增加自定义seek方法,用户自定义快进/快退,单位秒

  • tag0.1.0

    增加自定义stop方法,用户自定义视频停止播放

  • tag0.1.1

    修复ios自动播放失效问题

  • tag0.1.2

    增加专属域名apiOrigin参数