一、播放器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及以上

二、回调

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及以上

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)
}

results matching ""

    No results matching ""