产品文档 点播技术文档 PC网页点播SDK

PC 网页点播SDK

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

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

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

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

说明

当前播放器为PC flash播放器,可兼容部分不支持html5 video播放器的浏览器,移动端不能使用flash播放器。

如需集成PC html5 video播放器,请选择PC h5播放器SDK

如需集成移动端 html5 video播放器,请选择移动端h5视频点播SDK

初始化

使用方法


/** * * @param {string} dom 容器的selector * @param {Object} param 初始化参数 */ var instance = new bjcPlayer(domSelector, param); // 初始化实例 instance.play(vid, sid); // 调用play方法播放指定序列(sid)的视频(vid)

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

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

版本

0.0.1

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

0.0.2

  • css地址:http://www.baijiayun.com/web/playback/0.0.2/playback/player.css
  • js地址: http://www.baijiayun.com/web/playback/0.0.2/playback/player.js
  • 更新内容: 增加专属域名参数privateDomainPrefix

0.0.3

  • css地址:http://www.baijiayun.com/web/playback/0.0.3/playback/player.css
  • js地址: http://www.baijiayun.com/web/playback/0.0.3/playback/player.js
  • 更新内容: 增加防止浏览器录屏功能和第三方鉴权

0.0.5

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

param参数说明

参数 类型 必填 默认 说明 最低版本
token string - 后端给的 0.0.1
privateDomainPrefix string - 百家云后台查看 0.0.2
autoplay boolean true 是否自动播放 0.0.1
customPlayerLogo string 配置值 给每个视频定制logo 0.0.1
customHourseLamp string 给每个视频定制跑马灯ID 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
onplayfail Function 播放失败触发 0.0.1
onplaybegin Function 开始播放触发 0.0.1
onplaypause Function 播放暂停触发 0.0.1
ontimeupdate Function 播放时间更新触发,秒为单位 0.0.1
onseeked Function 用户seek行为以后触发,秒为单位 0.0.1
onresume Function 暂停以后重新播放触发 0.0.1
onplayfinish Function 播放完成触发 0.0.1
onpartfinish Function 片头,片尾,正文播放完成都会触发(可选) 0.0.1

实例方法

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/0.0.5/playback/player.css" rel="stylesheet"> </head> <body> <div id="main" style="width:100%;height:300px"></div> </body> <script src="//live-cdn.baijiayun.com/www-video-jssdk/0.0.5/playback/player.js"> </script> <script> var player = new bjcPlayer('#main', { token: 'Jn3SZuoZ03g3S3PxCaNttRb33AcPu-poL5ZQra9b5SYxuSba8SBafg', privateDomainPrefix: '', // 专属域名前缀 0.0.2版本开始支持 customPlayerLogo: 'http://cdn.gsxservice.com/asset/img/logo-release2_96e0aea1fb.png', customHourseLamp: '1024', user_name: '用户名', // 用户名, 主要用于数据统计 user_number: '12345', // 用户id, 主要用于数据统计 onplayfail: function () { console.log('onplayfail event'); }, onplayfinish: function () { console.log('onplayfinish event'); }, onpartfinish: function () { console.log('onpartfinish event'); }, onplaybegin: function () { console.log('onplaybegin event'); }, onplaypause: function () { console.log('onplaypause event'); }, ontimeupdate: function (currentTime) { console.log('ontimeupdate event'); console.log('currentTime:' + currentTime); }, onseeked: function (time) { console.log('onseek event'); console.log('seekTime:' + time); } }); player.play('5153273'); </script> </html>

2 用iframe嵌入的方式

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

3 js脚本方式(升级版本需修改sdk地址)

说明

使用该方式集成,会根据ua自动集成不同播放器sdk

版本

0.0.1

  • js地址:https://www.baijiayun.com/web/playback/asset/bjcVideoPlayer.js
  • 更新内容: --

0.0.2

  • js地址: https://www.baijiayun.com/web/playback/0.0.2/bjcVideoPlayer.js
  • 更新内容: 增加专属域名参数privateDomainPrefix

0.0.3

  • js地址: https://www.baijiayun.com/web/playback/0.0.3/bjcVideoPlayer.js
  • 更新内容: 增加防止浏览器录屏功能和自定义传入user_name、user_number以及自定义上报字段customReportString

0.0.5

  • js地址: //live-cdn.baijiayun.com/www-video-jssdk/0.0.5/bjcVideoPlayer.js
  • 更新内容: 代码迁移

页面插入标签 <script src="//live-cdn.baijiayun.com/www-video-jssdk/0.0.5/bjcVideoPlayer.js?vid=10221531&token=-6eticIq_Bk-TY1sLSf0znITuVkV-T3sL1hCa7m68wRgvYaZEHQEwA&autoplay=false&width=100%&height=500px&onplaypause=testHandler.onplaypause&onresume=testHandler.onresume&ontimeupdate=testHandler.ontimeupdate&onplaybegin=testHandler.onplaybegin" type="text/javascript"> </script>

参数说明

参数 必填 默认 说明 最低版本号
vid - 视频id,如果网页url的get参数中有vid,则优先取之 0.0.1
token - 后端获取, 如果网页url的get参数中有token,则优先取之 0.0.1
privateDomainPrefix - 百家云后台账户信息查看专属域名 0.0.2
autoplay false 是否自动播放 0.0.1
customHourseLamp 给每个视频定制跑马灯ID 0.0.1
marquee {} 自定义跑马灯(包含样式,内容。customHourseLamp只能指定内容,不能定制样式,同时存在时,会覆盖customHourseLamp的值) 0.0.1
width - 视频宽度,width=100%或者width=100px 0.0.1
height - 视频高度,height=100%或者height=100px 0.0.1
user_name 用户名,用于数据统计 0.0.3
user_number 用户ID,用于数据统计 0.0.3
customReportString 自定义上报字段 0.0.3
onplaybegin 开始播放触发,值为window上的函数对象 0.0.1
onplaypause 播放暂停触发,值为window上的函数对象 0.0.1
ontimeupdate 播放时间更新触发,秒为单位,值为window上的函数对象 0.0.1
onseeked 用户seek行为以后触发,秒为单位,值为window上的函数对象 0.0.1
onplayfinish 播放完成触发,值为window上的函数对象 0.0.1

marquee格式以及说明


{ "type":"text/image", "text": { "content": "1024",//跑马灯显示的文字内容 "font_size": 36,//字体大小 "font_color": "0xffffff",//字体颜色 "font_alpha": 0.8//字体透明度,取值范围(0,1),数值越小越透明 }, "action": { "start_xpos": 1500,//跑马灯动作开始位置的x坐标 "start_ypos": 50,//开始位置的y坐标 "end_xpos": 0,//结束位置的x坐标 "end_ypos": 50,//结束位置的y坐标 "duration": 15000//跑马灯动作的持续时间,单位是毫秒 } }

脚本执行完成后,生成window.bjyPlayerInstance用于外部调用

实例方法

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

instance.pause()   // 播放暂停

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

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