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

PC 点播SDK

1 引入js的方式

引入css文件 http://www.baijiacloud.com/web/asset/playback/player.css

引入js文件,http://www.baijiacloud.com/web/asset/playback/player.js

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

初始化

使用方法


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

param参数说明

参数 类型 必填 默认 说明
token string - 后端给的
autoplay boolean true 是否自动播放
customPlayerLogo string 配置值 给每个视频定制logo
customHourseLamp string 给每个视频定制跑马灯ID
user_name string 用户名, 主要用于数据统计
user_number string 用户number, 主要用于数据统计
customReportString string 自定义上报参数,如user_name=baijiayun&user_number=123
onplayfail Function 播放失败触发
onplaybegin Function 开始播放触发
onplaypause Function 播放暂停触发
ontimeupdate Function 播放时间更新触发,秒为单位
onseeked Function 用户seek行为以后触发,秒为单位
onresume Function 暂停以后重新播放触发
onplayfinish Function 播放完成触发
onpartfinish Function 片头,片尾,正文播放完成都会触发(可选)

实例方法

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="http://www.baijiacloud.com/web/asset/playback/player.css" rel="stylesheet"> </head> <body> <div id="main" style="width:100%;height:300px"></div> </body> <script src="http://www.baijiacloud.com/web/asset/playback/player.js"> </script> <script> var player = new bjcPlayer('#main', { token: 'Jn3SZuoZ03g3S3PxCaNttRb33AcPu-poL5ZQra9b5SYxuSba8SBafg', 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脚本方式


页面插入标签 <script src="https://api.baijiayun.com/web/playback/asset/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,则优先取之
token - 后端获取, 如果网页url的get参数中有token,则优先取之
autoplay false 是否自动播放
customHourseLamp 给每个视频定制跑马灯ID
marquee {} 自定义跑马灯(包含样式,内容。customHourseLamp只能指定内容,不能定制样式,同时存在时,会覆盖customHourseLamp的值)
width - 视频宽度,width=100%或者width=100px
height - 视频高度,height=100%或者height=100px
onplaybegin 开始播放触发,值为window上的函数对象
onplaypause 播放暂停触发,值为window上的函数对象
ontimeupdate 播放时间更新触发,秒为单位,值为window上的函数对象
onseeked 用户seek行为以后触发,秒为单位,值为window上的函数对象
onplayfinish 播放完成触发,值为window上的函数对象

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()  // 获取当前播放的时间,返回值单位是秒