一、播放器API
页面可以主动调用播放器api,用于获取播放器数据、设置播放器数据或改变播放器播放行为。播放器所有api如下:
1、window下的api:
api方法 | 参数 | 返回值 | 说明 | 示例 | 支持版本 |
---|---|---|---|---|---|
createCCH5Player(config) | {对数配置对象} | 播放器对象 | 创建播放器 | var player = createCCH5Player({vid: '49978DE73FEBAC369C33DC5901307461', siteid:'407C0500BD0F12BC'}) | V2.1.0及以上 |
2、播放器对象下的api:
使用js播放代码时播放器对象是window.cc_js_Player,同一页面多个视频时会被覆盖,可通过 on_CCH5player_ready回调获取与视频相关的播放器对象。 使用window.createCCH5Player({...})方法主动创建播放器时此方法返回值即为播放器对象。
api方法 | 参数 | 返回值 | 说明 | 示例 | 支持版本 |
---|---|---|---|---|---|
play() | 无 | 无 | 让视频播放 | player.play() | V2.1.0及以上 |
pause() | 无 | 无 | 让视频暂停 | player.pause() | V2.1.0及以上 |
getDuration() | 无 | 视频时长(秒) | 获取视频时长,视频播放后才能获取player.getDuration() | V2.1.0及以上 | |
getPosition() | 无 | 当前视频播放时间(秒) | 获取视频播放了多少时间,单位秒,视频播放后才能获取 | player.getPosition() | V2.1.0及以上 |
setVolume(volumn) | volumn:音量 | 无 | 设置音量,取值[0-1]的小数player.setVolume(0.5) | V2.1.0及以上 | |
setQuality(quality) | quality:要切换的目标清晰度值 | 无 | 切换成指定清晰度 | player.setQuality(20) | V2.1.0及以上 |
jumpToTime(second) | second:指定的播放时间点 | 无 | 跳转到某个时间点播放,单位秒 | player.jumpToTime(30) | V2.1.0及以上 |
normalScreen() | 无 | 无 | 退出全屏播放 | player.normalScreen() | V2.1.0及以上 |
fast_forward_time(speed) | speed:速度 | 无 | 设置快进快退速度,参数 speed 取值[0-1]时为百分比跳转, 大于1时为值跳转 | player.fast_forward_time(10) | V2.1.0及以上 |
destroy() | 无 | 无 | 第二个视频替换第一个视频播放时销毁第一个视频播放产生的资源,主要是定时器,销毁后不能再播放 | player.destroy() | V2.1.0及以上 |
getQualities() | 无 | 当前视频可⽤清晰度列表 | Array eg. [{value:"0",label:"普通"},{value:"1",label:"清晰"}] |
player.getQualities() | V2.1.0及以上 |
setQuality(quality) | quality | 无 | 设置清晰度,参数 quality 为 getQualities 方法获取的 value 值 | player.setQuality(quality) | V2.1.0及以上 |
fullScreen() | 无 | 无 | 进入全屏 | player.fullScreen() | V2.4.0及以上 |
isFullScreen() | 无 | true为全屏;false非全屏 | 获取当前屏幕全屏状态 | player.isFullScreen() | V2.4.0及以上 |
getCurrDf() | 无 | 当前清晰度 | 获取当前清晰度 | player.getCurrDf() | V2.4.0及以上 |
getCurrRate() | 无 | 当前倍速 | 获取当前播放倍速 | player.getCurrRate() | V2.4.0及以上 |
getVideoState() | 无 | 当时播放状态play or pause | 获取播放状态 | player.getVideoState() | V2.4.1及以上 |
setQuestions(questions) | questions必须为数组 | 无 | 设置问答 | V2.4.6及以上 | |
changeQuestionItem(data) | data为问答数据对象 | 无 | 修改某个时间点的问答 | V2.4.6及以上 | |
setKnowledge(data) | data为数组 | 无 | 设置知识点 | V2.7.0及以上 | |
toggleVote(Boolean) | true:显示;false:隐藏 | true:设置成功;false:设置失败 | 切换答题器显示隐藏 | player.toggleVote(false) | V2.7.2及以上 |
setPublicityPic(data) | data为宣传图数据对象 | 无 | 设置宣传图 (见页面底部) | player.setPublicityPic(data) | V2.7.3及以上 |
changeVideo(vid, config) | vid:视频id(必填);config:配置对象(非必填) | 无 | 切换视频(支持自动播放) | player.changeVideo(vid) | V2.8.0及以上 |
palyer.getPlayedPausedTimes() | 无 | Object | 获取播放状态时长(重复播放不去重) | player.getPlayedPausedTimes() | V2.8.0及以上 |
switchVideo(vid, config) | vid:视频id(必填);config: 配置对象(非必填) | 无 | 不销毁播放器切换视频 | player.switchVideo(vid) | v3.5.6及以上 |
二、回调
1、 H5 video标签相关api二次封装后的回调
使用样例
注意:目前CC H5播放器有以下可选的回调函数,需要在CC H5播放器script加载之前向全局暴露这些函数
<script>
function on_CCH5player_ready(obj) {
console.log('CCH5player_ready', obj);
}
function on_CCH5player_play() {
console.log('CCH5player_play');
}
function on_CCH5player_pause() {
console.log('CCH5player_pause');
}
function on_CCH5player_ended() {
console.log('CCH5player_ended');
}
</script>
<script src="https://p.bokecc.com/player?vid=aaa&siteid=xxx&autoStart=false&width=600&height=490&playerid=bbb&playertype=1" type="text/javascript"></script>
2、播放器回调
播放器回调方法是window对象下的方法,所有回调方法如下:
回调方法 | 参数 | 返回值 | 说明 | 支持版本 |
---|---|---|---|---|
on_CCH5player_ready(obj) | obj: 包含videoElement、container、vid三个属性,分别指当前视频对象,当前播放器容器,当前视频id | 无 | 播放器初始化完成即将播放时回调 | V2.1.0及以上 |
on_CCH5player_adEnd(adId, vid) | adId: 广告id, vid: 视频id | 无 | 广告播放结束时回调 | V2.1.0及以上 |
on_pause_showAd(vid) | vid: 视频id | 无 | 暂停广告显示时回调 | V2.1.0及以上 |
on_CCH5player_play(video, vid) | video: 视频节点对象, vid: 视频id | 无 | 播放时回调 | V2.1.0及以上 |
on_CCH5player_pause(video, vid) | video: 视频节点对象, vid: 视频id | 无 | 暂停播放时回调 | V2.1.0及以上 |
on_CCH5player_ended(video, vid) | video: 视频节点对象, vid: 视频id | 无 | 播放结束时回调 | V2.1.0及以上 |
is_skip_ad(vid) | vid: 视频id | 返回true或false,为true时表示跳过广告 | 播放器初始化完成时回调 | V2.1.0及以上 |
get_cc_verification_code(vid) | vid: 视频id | 返回授权验证码 | 播放器开始加载数据时回调 | V2.1.0及以上 |
get_custom_id(vid) | vid: 视频id | 返回自定义统计参数 | 播放器开始加载数据时回调 | V2.1.0及以上 |
on_player_fullscreen(mode, vid) | mode: 0为退出全屏,1为变成全屏,vid:视频id | 无 | 播放器退出全屏或变全屏时回调 | V2.1.0及以上 |
on_switch_quality(vid, newQuality) | vid: 视频id, newQuality: 切换后的清晰度值 | 无 | 切换清晰度时回调 | V2.1.0及以上 |
on_player_volumechange(volumn, vid) | volumn: 音量改变后值, vid: 视频id | 无 | 改变音量时回调 | V2.1.0及以上 |
on_player_seek(prevTime, currentTime) | prevTime: 进度变化前时间, currentTime: 视频进度变化后时间 | 无 | 拖动或点击进度条改变播放进度时回调 | V2.1.0及以上 |
on_switch_rate (vid, newRate) | vid: 视频id, newRate: 切换后的倍速值 | 无 | 切换倍速时回调 | V2.1.0及以上 |
on_player_timeupdate(currentTime, vid) | currentTime: 当前播放时间 ;vid:视频id | 无 | 播放位置发生改变时回调 | V2.2.0及以上 |
on_h5player_error(errInfo) | errInfo包含errCode,errMsg,siteId,vid | 无 | 错误码回调,错误码列表见本页面底部 | V2.3.6及以上 |
on_player_start_drag(currentTime, vid) | currentTime: 视频当前进度 | 无 | 开始拖动进度条时回调 | V2.4.0及以上 |
on_player_buffering(obj) | obj包含vid,flag ;flag: 1缓冲中,0缓冲结束 | 无 | 缓冲中或者缓冲结束回调 | V2.4.0及以上 |
on_player_qa_show(obj, vid) | obj包含自定义问答功能该问答信息 | 无 | 问答显示的回调 | V2.4.6及以上 |
on_player_qa_skip(obj, vid) | obj包含自定义问答功能该问答信息 | 无 | 跳过问答的回调 | V2.4.6及以上 |
on_player_qa_result(obj, vid) | obj包含自定义问答功能question(问答信息),isRight(1为答对;0为答错),answersId(已选id) | 无 | 问答结果回调 | V2.4.6及以上 |
on_player_qa_review(obj, isRight, vid) | obj该问答相关信息,isRight(1为答对;0为答错),vid(视频id) | 无 | 问答回看回调 | V2.4.11及以上 |
on_player_vote_show(obj, vid) | obj包含答题器功能当前选项相关信息 | 无 | 选项显示的回调 | V2.5.8及以上 |
on_player_vote_skip(obj, vid) | obj包含答题器功能当前选项信息 | 无 | 跳过当前题的回调 | V2.5.8及以上 |
on_player_vote_result(obj, vid) | obj包含答题器功能当前选项信息currVote,isRight(1为答对;0为答错),answersId(已选id) | 无 | 答题结果的回调 | V2.6.1及以上 |
on_view_knowledge(data, time, vid) | data为当前知识点相关信息,time(当前查看的知识点进度),vid(视频id) | 无 | 知识点观看行为的回调 | V2.7.0及以上 |
on_CCH5player_publicityJump | vid:视频id,currentTime:当前播放时间,linkUrl: 跳转地址 | 无 | 点击宣传图跳转的回调 | V2.7.3及以上 |
on_CCH5player_publicityClose | vid:视频id,currentTime:当前播放时间,flag:true(手动关闭),false(自动关闭) | 无 | 宣传图关闭的回调 | V2.7.3及以上 |
on_player_sign_result(second, vid) | second签到时间点,vid视频id | 无 | 签到结果的回调 | V3.1.0及以上 |
cc_h5player_config | vid: 视频id | 初始化参数对象 | 将需要传给播放器的参数放到对象中返回,示例如下: { "isShare":"false", "banDrag": "true" } |
V3.3.1及以上 |
on_page_fullscreen(mode,vid) | mode: 0为退出全屏,1为变成全屏,vid:视频id | 无 | 播放器点击网页全屏按钮或点击退出网页全屏时回调,开发者回调中自行添加网页全屏逻辑 | v3.5.4及以上 |
3、播放器js加载完成回调
回调方法 | 参数 | 返回值 | 说明 | 支持版本 |
---|---|---|---|---|
onCCH5PlayerLoaded() | 无 | 无 | 播放器js文件加载完成时回调 | V2.1.0及以上 |
4、错误码
错误码 | 说明 | 显示内容 | 支持版本 |
---|---|---|---|
1000 | 参数不合理 | No video url, please check the parameters | V2.3.6及以上 |
1001 | vid或siteId 不存在 | The vid or siteId does not exist | V2.3.6及以上 |
1002 | vid和siteId不匹配 | The vid does not match the siteId | V2.3.6及以上 |
1003 | vid或siteId格式不正确 | The format of vid or siteId is incorrect | V2.3.6及以上 |
2001 | 开始下载元数据错误 | The video file loaded failed | V2.3.6及以上 |
2002 | 播放时错误 | Error occured while playing | V2.3.6及以上 |
3000 | 网络不可用 | The network is unreachable, please click Refresh | V2.3.6及以上 |
3001 | 加载超时 | A network request timed out | V2.3.6及以上 |
3002 | 服务端请求错误 | Error occurred while requesting server | V2.3.6及以上 |
5、api示例
5.1自定义问答功能使用示例
var player = createCCH5Player({
vid:'A4F81E6E8DD693A59C33DC5901307461',
siteid: '2661F9756E5C832E',
width: '600',
height: '400',
autoStart: 'true',
//播放器容器,可以是选择器如#id或.class等,也可以是节点对象
parentNode: '#playerContainer'
});
function on_CCH5player_ready() {
var questions=[{
"answers":[
{"right":true,"id":1,"content":"A、选项一"},
{"right":false,"id":2,"content":"B、选项二"},
{"right":false,"id":3,"content":"C、选项三"},
{"right":false,"id":4,"content":"D、选项四"}
],
"showTime":5,
"explainInfo":"",
"explainWrongAns": "",
"jump":true,
"backSecond":-1,
"keepPlay":true,
"id":10,
"content":"问答题目1"
}]
player.setQuestions(questions) // 设置问答
var data = {
"answers": [
{"right": true, "id": 1, "content": "A、选项一"},
{"right": false, "id": 2, "content": "B、选项二"},
{"right": false, "id": 3, "content": "C、选项三"},
{"right": false, "id": 4, "content": "D、选项四"}
],
"showTime": 5,
"explainInfo": "",
"jump": true,
"backSecond": -1,
"keepPlay": true,
"id": 12,
"content": "问答题目12"
}
player.changeQuestionItem(data) // 修改某个时间点的问答
}
5.2知识点功能使用示例
function on_CCH5player_ready() {
setKnowledge();
}
function setKnowledge() {
var data = {
title: '知识点',
category: [{
cateId: 1,
name: '知识点1',
info: [{
id: 1,
time: 4,
desc: '知识点详情1'
}, {
id: 3,
time: 7
}]
}, {
cateId: 2,
name: '知识点2',
info: [{
id: 1,
time: 40,
desc: '知识点详情3'
}]
}]
};
window.cc_js_Player.setKnowledge(data);
}
5.3宣传图功能使用示例
function on_CCH5player_ready() {
setPublicityPic();
}
function setPublicityPic() {
var data = {
url: 'xxxx', // 图片地址(必填,地址格式需以“.jpg” 、“.jpeg”、 “.gif”、 “.png”结尾)
linkUrl: 'xxxx', // 跳转链接(非必填,无默认值,链接需包含“https://”协议头)
size: 20, // 大小[0,100],按照播放器宽度进行百分比等比例缩放(必填,默认10%)
posX: 0, // 位置:以播放器左下角为原点,图片左下角为距离点,进行横纵轴百分比设置 (必填,默认0)
posY: 0, // 同上
changeVideoStatus: false, // 设置时是否改变播放状态,默认为否 (非必填)
showTime: 10, // 设置显示时长/秒,显示时长倒计时结束后自动关闭,不传此参数即无自动关闭功能(非必填)
canClose: true, // 设置是否允许手动关闭(非必填,默认值为true)
closeTime: 4 // 设置关闭按钮倒计时多少秒后显示,canClose为true时此参数生效(非必填,无默认值)
}
window.cc_js_Player.setPublicityPic(data)
}