产品文档 点播技术文档 PC h5播放器SDK

PC h5播放器SDK

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

需要引入jQuery //libs.baidu.com/jquery/1.9.0/jquery.min.js

引入css文件 //live-cdn.baijiayun.com/www-video-jssdk/dep/videojs/0.0.5/dist/videojs.css

引入videojs文件,//live-cdn.baijiayun.com/www-video-jssdk/dep/videojs/0.0.5/dist/videojs.js

引入播放器js文件,//live-cdn.baijiayun.com/www-video-jssdk/0.0.6/bjcPlayer/index.js

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

说明

当前播放器为PC html5 video播放器,暂不支持在移动端浏览器以及部分低版本IE浏览器播放。

如需兼容低版本IE浏览器,请选择PC网页点播SDK

如需在移动端浏览器播放,请选择移动端h5视频点播SDK

初始化

使用方法


/** * * @param {string} dom 容器的selector * @param {Object} param 初始化参数 */ var instance = new BjcPlayer(domSelector, param); // 初始化实例

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

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

版本

0.0.1

  • css地址: http://www.baijiayun.com/web/playback/dep/videojs/0.0.1/dist/videojs.css
  • videojs地址: http://www.baijiayun.com/web/playback/dep/videojs/0.0.1/dist/videojs.js
  • 播放器js地址:http://www.baijiayun.com/web/playback/asset/bjcPlayer/index.js
  • 更新内容: --

0.0.2

  • css地址: http://www.baijiayun.com/web/playback/dep/videojs/0.0.2/dist/videojs.css
  • videojs地址: http://www.baijiayun.com/web/playback/dep/videojs/0.0.2/dist/videojs.js
  • 播放器js地址:http://www.baijiayun.com/web/playback/0.0.2/bjcPlayer/index.js
  • 更新内容: 增加专属域名参数privateDomainPrefix,禁止拖拽进度条参数disableSeek,默认播放加密格式视频

0.0.3

  • css地址: http://www.baijiayun.com/web/playback/dep/videojs/0.0.3/dist/videojs.css
  • videojs地址: http://www.baijiayun.com/web/playback/dep/videojs/0.0.3/dist/videojs.js
  • 播放器js地址:http://www.baijiayun.com/web/playback/0.0.3/bjcPlayer/index.js
  • 更新内容: 增加防止浏览器录屏功能和第三方鉴权参数

0.0.4

  • css地址: http://www.baijiayun.com/web/playback/dep/videojs/0.0.4/dist/videojs.css
  • videojs地址: http://www.baijiayun.com/web/playback/dep/videojs/0.0.4/dist/videojs.js
  • 播放器js地址:http://www.baijiayun.com/web/playback/0.0.4/bjcPlayer/index.js
  • 更新内容: 播放结束视频源切换报错bugfix,播放出错onerror新增错误信息msg

0.0.5

  • css地址: //live-cdn.baijiayun.com/www-video-jssdk/dep/videojs/0.0.4/dist/videojs.css
  • videojs地址: //live-cdn.baijiayun.com/www-video-jssdk/dep/videojs/0.0.4/dist/videojs.js
  • 播放器js地址://live-cdn.baijiayun.com/www-video-jssdk/0.0.5/bjcPlayer/index.js
  • 更新内容: 播放器地址迁移

0.0.6

  • css地址: //live-cdn.baijiayun.com/www-video-jssdk/dep/videojs/0.0.5/dist/videojs.css
  • videojs地址: //live-cdn.baijiayun.com/www-video-jssdk/dep/videojs/0.0.5/dist/videojs.js
  • 播放器js地址://live-cdn.baijiayun.com/www-video-jssdk/0.0.6/bjcPlayer/index.js
  • 更新内容: 多视频切换混音bugfix

param参数说明

参数 类型 必填 默认 说明 最低版本
token string - 后端给的 0.0.1
privateDomainPrefix string - 百家云后台查看 0.0.2
autoplay boolean true 是否自动播放 0.0.1
loop boolean false 是否循环播放 0.0.1
showLogo boolean false 是否展示logo 0.0.1
playbackRates array [0.7, 1, 1.2, 1.5, 2] 倍速列表 传[]隐藏 0.0.1
showWatermark boolean false 是否展示水印 0.0.1
currentTime int 0 开播时间点(单位:秒) 0.0.1
user_name string 用户名, 主要用于数据统计 0.0.1
user_number string 用户number, 主要用于数据统计 0.0.1
customReportString string 自定义上报参数,如user_name=baijiayun&user_number=123 0.0.1
access_key string 第三方鉴权参数 0.0.3
onerror Function 播放失败触发 0.0.1
onplay Function 开始播放触发 0.0.1
onpause Function 播放暂停触发 0.0.1
ontimeupdate Function 播放时间更新触发,秒为单位 0.0.1
onseeked Function 用户seek行为以后触发,秒为单位 0.0.1
onended Function 播放完成触发 0.0.1
disableSeek int 0 是否禁止拖拽 0.0.2
hideProgress int 0 是否隐藏进度条 0.0.2

实例方法

instance.seek(10)   //  指定播放位置,时间单位是秒,必须要在onplaybegin之后调用

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/www-video-jssdk/dep/videojs/0.0.5/dist/videojs.css" rel="stylesheet"> <style> .bjc-player-wrapper { width: 100%; height: 100%; } .bjc-player-wrapper .video-js { width: 100%; height: 100%; } </style> </head> <body> <div id="main" style="width:100%;height:300px"> <div class="bjc-player-wrapper"> <video class="video video-js vjs-default-skin"> </video> </div> </div> </body> <script src="//libs.baidu.com/jquery/1.9.0/jquery.min.js"></script> <script src="//live-cdn.baijiayun.com/www-video-jssdk/dep/videojs/0.0.5/dist/videojs.js"></script> <script src="//live-cdn.baijiayun.com/www-video-jssdk/0.0.6/bjcPlayer/index.js"> </script> <script> var player = new BjcPlayer($('#main').find('.video')[0], { token: 'Jn3SZuoZ03g3S3PxCaNttRb33AcPu-poL5ZQra9b5SYxuSba8SBafg', vid: '5153273', playbackRates: [0.7, 1, 1.2, 1.5, 2], // 倍速 传入 [] 隐藏倍速列表 privateDomainPrefix: '', // 专属域名前缀 0.0.2版本开始支持 user_name: '用户名', // 用户名, 主要用于数据统计 user_number: '12345', // 用户id, 主要用于数据统计 onerror: function () { console.log('onplayerror event'); }, onended: function () { console.log('onplayend event'); }, onplay: function () { console.log('onplaybegin event'); }, onpause: function () { console.log('onplaypause event'); }, ontimeupdate: function (data) { console.log('ontimeupdate event'); console.log('currentTime:' +data. currentTime); }, onseeked: function (data) { console.log('onseek event'); console.log('seekTime:' + data.currentTime); }, onerror: function (data) { console.log('onerror event'); console.log(data.msg); } }); </script> </html>

如果需要切换视频,请先销毁上一次的player后再新建

player.dispose();
 $('.bjc-player-wrapper').html('<video class="video video-js vjs-default-skin"></video>');