产品文档 点播技术文档 移动端h5视频点播SDK

移动端h5点播SDK

仅支持在手机上使用,播放格式为m3u8,PC不支持

1 引入js的方式(升级版本需修改文件地址)

引入css文件 //live-cdn.baijiayun.com/m-video-jssdk/0.0.5/playback/player.css

引入js文件,//live-cdn.baijiayun.com/m-video-jssdk/0.0.5/playback/player.js

如需加密引用flv.min.js(sdk 0.0.3 开始支持):

//live-cdn.baijiayun.com/m-video-jssdk/dep/dplayer/1.25/flv.min.js

引入文件后生成全局的类 window.bjcPlayer

专属域名前缀(sdk 0.0.2 开始支持)

在百家云后台账户中心可查看是否有专属域名,如有专属域名,可在集成sdk时传入privateDomainPrefix参数。如专属域名为:zhuanye.at.baijiayun.com,privateDomainPrefix: zhuanye。

说明

当前播放器为移动端html5 video播放器,因手机浏览器限制较多,功能较少,如需PC集成,请选择PC h5播放器SDK

初始化

使用方法


/** * * @param {string} dom 容器的selector * @param {Object} param 初始化参数 */ var instance = new bjcPlayer(domSelector, param); // 初始化 instance.play(vid); // 播放视频(vid为视频id)

param参数说明

参数 类型 必填 默认 说明 最低版本
token string - 后端给的 0.0.1
privateDomainPrefix string 专属域名前缀 0.0.2
disableX5Player boolean false 是否禁用微信同层播放器,值为true可取消播放器自动全屏(清晰度切换功能会消失) 0.0.2
useEncrypt boolean false 是否使用加密(需引用flv.min.js) 0.0.3
disableDefinitionSwitch boolean false 是否禁用清晰度切换(不显示) 0.0.3
media string 播放格式(传入'audio'播放音频) 0.0.3
access_key string 第三方鉴权参数 0.0.4
poster string video封面 0.0.5
user_name string 用户名, 主要用于数据统计 0.0.1
user_number string 用户number, 主要用于数据统计 0.0.1
onplay Function 播放触发 0.0.1
onpause Function 播放暂停触发 0.0.1
onended Function 播放完成触发 0.0.1
onerror Function 播放错误触发 0.0.1
ontimeupdate Function 播放时间更新触发,秒为单位 0.0.1
onseeked Function 用户seek行为以后触发,秒为单位 0.0.1

方法

     instance.play(vid); // 播放指定视频 

     instance.seek(time);  // time单位是秒,指定位置播放

     instance.pause()   // 播放暂停

     instance.resume()  // 暂停后重新播放

     instance.getCurrentTime()  // 获取当前播放的时间,返回值单位是秒

示例


<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百家云播放器sdk demo</title> <link href="//live-cdn.baijiayun.com/m-video-jssdk/0.0.5/playback/player.css" rel="stylesheet"> </head> <body> <!-- 设置视频区域高度必须写在播放器初始化的dom节点上 --> <div id="main" style="width:100%;height:500px"></div> <!-- 如需加密播放ev1格式视频,引入flv.min.js --> <script src="//live-cdn.baijiayun.com/m-video-jssdk/dep/dplayer/1.25/flv.min.js"></script> <script src="//live-cdn.baijiayun.com/m-video-jssdk/0.0.5/playback/player.js"> </script> <script> var player = new bjcPlayer('#main', { token: 'Jn3SZuoZ03g3S3PxCaNttRb33AcPu-poL5ZQra9b5SYxuSba8SBafg', definition: 'low', // hign 高清 low 低清 privateDomainPrefix: '', // 专属域名 onended: function () { // console.log('onended'); }, onplay: function () { // console.log('onplay'); }, onpause: function () { // console.log('onpause'); }, onerror: function (e) { console.log('onerror'); console.log(e); }, ontimeupdate: function (time) { console.log('ontimeupdate-->' + time); }, onseeked: function (time) { console.log('onseeked-->' + time); } }); player.play('5153273'); </script> </body> </html>

2 用iframe嵌入的方式

http://api.baijiayun.com/m/video/player?vid=123&token=121212

3 版本更新

0.0.1

  • css地址: http://www.baijiayun.com/m/asset/playback/player.css
  • js地址: http://www.baijiayun.com/m/asset/playback/player.js
  • 更新内容: --

0.0.2

  • css地址:http://www.baijiayun.com/m/playback/0.0.2/playback/player.css
  • js地址: http://www.baijiayun.com/m/playback/0.0.2/playback/player.js
  • 更新内容: x5同层播放器横屏高度Bugfix,自定义是否使用x5同层播放器(disableX5Player)

0.0.3

  • css地址:http://www.baijiayun.com/m/playback/0.0.3/playback/player.css
  • js地址: http://www.baijiayun.com/m/playback/0.0.3/playback/player.js
  • 更新内容: 是否使用加密播放(useEncrypt,加密后播放ev1格式,ios端对MSE不兼容,只能播mp4),是否禁用清晰度切换(disableDefinitionSwitch),默认播放格式(media)

0.0.4

  • css地址:http://www.baijiayun.com/m/playback/0.0.4/playback/player.css
  • js地址: http://www.baijiayun.com/m/playback/0.0.4/playback/player.js
  • 更新内容:增加点播第三方鉴权参数

0.0.5

  • css地址://live-cdn.baijiayun.com/m-video-jssdk/0.0.5/playback/player.css
  • js地址: //live-cdn.baijiayun.com/m-video-jssdk/0.0.5/playback/player.js
  • 更新内容:代码迁移