登录
目录
当前位置： 首页 > 文档资料 > 获得场景视频 云点播文档 >

使用说明

优质
小牛编辑
134浏览
2023-12-01

点击查看在线demo（标准版）

点击查看在线demo（VUE版）

点击下载demo

一、版本说明

1、版本

最新版本 V2.5.1 日期 2021-02-02

2、版本更新记录

更新日期版本号更新内容
2021-02-022.5.11、新增倍速按钮显示控制参数 2、新增PC端全屏禁用和显示控制参数
2021-01-282.5.0新增自定义logo参数
2021-01-262.4.11新增自定义问答回看时回调
2020-12-242.4.8新增自定义问答功能答错解析字段
2020-12-222.4.7优化【开始播放时间】参数使用方法（可跳过问答等信息）及部分兼容问题
2020-12-152.4.6问答功能支持自定义配置
2020-12-082.4.5新增试看功能配置参数使用方式（试看时长、试看提示文案、试看跳转链接、试看结束文案、试看结束跳转链接）
2020-11-252.4.3新增切换视频沿用上个视频设置参数（音量、倍速、清晰度）功能
2020-11-242.4.2修复部分机型微信内ts格式切换清晰度重新播放问题
2020-11-182.4.11、新增播放底部面板显示参数 2、新增查询视频播放暂停状态接口
2020-11-112.4.01、新增缓冲中回调 2、新增缓冲结束回调 3、新增全屏api 4、新增获取全屏状态api 5、新增获取当前清晰度api 6、新增获取当前倍速api
2020-11-052.3.6新增错误码回调
2020-11-022.3.51、新增课堂练习题目显示项控制参数 2、新增循环播放及循环播放次数参数
2020-10-272.3.4新增6个参数配置 1、控制右侧菜单是否显示参数 2、设置右侧菜单显示项 3、设置缓冲片头地址 4、是否开启缓冲片头 5、播放列表样式 6、播放列表是否默认展开
2020-10-152.3.3新增课堂练习跳过控制参数
2020-10-152.3.2新增 开始播放时间 参数
2020-09-252.3.1新增问答、课堂练习、访客信息收集器是否显示参数配置
2020-09-242.3.01、新增暂停视频广告、片尾视频及图片广告功能 2、新增5个清晰度相关参数配置 3、修复部分机型微信内切换清晰度会从头播放问题
2020-08-122.2.1新增静音自动播放配置参数
2020-08-042.2.0js代码支持 H5播放列表
2020-07-162.1.0播放器重构，重大更新

3、版本控制说明

版本控制：

使用js播放代码或者是api构造播放器默认加载最新版本的播放器，如果担心播放器升级版本后可能导致一些未测试到的异常问题，可以在js播放代码上通过参数指定具体的播放器版本，这样播放器升级新版本时对指定的版本不会有任何影响。播放器版本可通过下方版本说明获取。 参数为player_version，取值为具体的播放器版本，如player_version=2.1.0, js播放代码指定播放器版本示例如下：

                <script  src="https://p.bokecc.com/player?vid=AA22BDEE61E7455A9C33DC5901307461&siteid=2661F9756E5C832E&autoStart=false&width=600&height=490&playertype=1&player_version=2.1.0”    type="text/javascript"></script>

注： 1、指定播放器版本后如果新版本中优化了功能或者是修复了bug时，在指定播放器版本仍然保持不变。 2、若指定版本不存在，则播放器会构造失败导致无法播放。 3、若未指定版本，则默认构造最新版播放器。（V2.1.0版本之前无构造播放器功能，此描述仅适用于V2.1.0及之后版本）

一、使用说明

提示：常见参数问题

--参数名说明---
playtype指定flash播放器或H5播放器
playertype此参数仅flash播放器有效，指定flash播放器类型（基础类播放器、展示类播放器等）

1、先加载播放器js，通过api主动创建播放器（推荐使用）

创建播放器分为两种方式：

创建方式1：先使用js播放代码，第一个视频播放完后播放第二个视频，主动创建第二个视频的播放器播放，返回的播放器对象可以调用相关api， 示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>h5播放器测试</title>
</head>
<body>
    <div id="playerContainer" style="height: 500px;width: 100%">
        <script src="https://p.bokecc.com/player?vid=AA22BDEE61E7455A9C33DC5901307461&siteid=2661F9756E5C832E&autoStart=false&width=600&height=490&playertype=1&newversion=true" type="text/javascript"></script>
    </div>
    <script type="text/javascript">
        /***
         * 视频播放回调，第一个视频播放结束后播放第二个视频，替换第一个视频播放界面
         */
        function on_CCH5player_ended(oVideo, vid) {
            //判断是否是第一个视频播放结束的回调，如果是，创建第二个视频播放
            if(vid != 'AA22BDEE61E7455A9C33DC5901307461'){
                return;
            }
            var player = createCCH5Player({
                vid:'A4F81E6E8DD693A59C33DC5901307461',
                siteid: '2661F9756E5C832E',
                width: '600',
                height: '400',
                autoStart: 'true',
                //播放器容器，可以是选择器如#id或.class等，也可以是节点对象
                parentNode: '#playerContainer'
            });
        }
    </script>
</body>
</html>

创建方式2：先请求播放器的js文件，请求播放器js文件通过js播放代码，去掉除siteid之外的其它参数，相当于只加载播放器js，播放器js文件加载完后会有一个回调，在回调方法中主动创建播放器，示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>h5播放器测试</title>
</head>
<body>
    <div id="playerContainer" style="width: 100%;height: 500px"></div>
    <script type="text/javascript">
        /***
         * 播放器js文件加载完成的回调
         */
        function onCCH5PlayerLoaded() {
            //使用播放器提供的window下的createCCH5Player方法创建播放器
            var playerNew = createCCH5Player({
                'vid':'C18F506284ABAB3C9C33DC5901307461',
                'siteid':'2661F9756E5C832E',
                'mediatype':1,
                'autoStart':'true',
                'width':'100%',
                'height':'100%',
                'isShare':'false',
                'banDrag':'false',
                'parentNode': '#playerContainer'
            });
        }
    </script>
    <script src="https://p.bokecc.com/player?siteid=2661F9756E5C832E&newversion=true" type="text/javascript"></script>
</body>
</html>

注：为了保证播放器js加载完成的回调能被执行，回调方法应该先被定义，最好将播放器js文件放在页面底部加载。

2、使用js播放代码构造播放器

将js播放代码放在需要显示播放器的dom容器内，js代码自动执行后用构造的播放器html代码替换js播放代码。示例如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>h5播放器测试</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
    <div id="playerContainer" style="height: 500px;width: 100%">
        <script src="https://p.bokecc.com/player?vid=AA22BDEE61E7455A9C33DC5901307461&siteid=2661F9756E5C832E&autoStart=false&width=600&height=490&playertype=1&newversion=true" type="text/javascript"></script>
    </div>
</body>
</html>

二、播放配置

通过js播放代码构造播放器时，播放器配置在js播放代码请求url上通过参数的形式进行配置。通过播放器js提供的window对象下createCCH5Player方法创建播放器时，可以用对象属性和值的方式配置播放器，如上边使用方式中的示例一样，具体配置如下：

注：未加‘必填’说明的为非必填。

参数作用类型默认值说明支持版本
vid视频idString无视频id需与用户id匹配，js代码播放时必填V2.1.0及以上
siteid用户idString无必填V2.1.0及以上
width播放器宽度Number/Percent100%可省略px只写数据，百分比时需加%V2.1.0及以上
height播放器高度Number/Percent100%可省略px只写数据，百分比时需加%V2.1.0及以上
autoStart自动播放Booleanfalse是否自动播放（Chrome等部分浏览器会存限制导致无法自动播放，若需要绕过浏览器限制请使用参数 静音自动播放-realAutoPlay ）V2.1.0及以上
realAutoPlay静音自动播放Boolean无静音自动播放，仅PC端有效V2.2.1及以上
playtype构造播放器时指定播放器类型（FLASH 或 H5）Number无指定播放器类型，为0时FLASH播放器；为1时H5播放器，其他值无效V2.1.0及以上
isShare显示分享界面Booleanfalse为true时播放器上可让用户分享当前播放视频V2.1.0及以上
banDrag禁止跳过播放Booleanfalse为true时不允许快进至未观看部分（已观看部分可自由快进快退）V2.1.0及以上
forward快进快退步长Number/Percent5按左右方向键时会快退或快进，默认是5秒，配置数字时按固定秒数快进或快退，配置百分比时，按视频百分比快进快退V2.1.0 及以上
isSkipAd是否跳过广告Number0为1时将跳过广告，直接播放正片V2.1.0及以上
vc授权验证码String无授权验证时的授权验证码V2.1.0及以上
customerId自定义参数统计String无需要自定义参数统计时配置V2.1.0及以上
parentNode主动创建播放器时指定播放器的父节点String /Dom对象无js播放代码时不需要此参数，此参数可以是dom，也可以是querySelector的参数，如#id,.class等V2.1.0及以上
rate播放器默认倍速Number1设置播放器默认倍速，值为已知倍速列表中的倍速值V2.1.0及以上
rate_array倍速可选值列表Array[2, 1.5, 1.2, 1, 0.8]倍速可选值配置，有效值在[0.1-16]的范围，包含边界值，最多[1-7]个配置V2.1.0及以上
rate_allow_change是否允许切换倍速Booleantrue设置是否允许切换倍速V2.1.0及以上
open_barrage是否开启弹幕Boolean无设置是否开启弹幕，默认以admin设置为准，播放器配置此参数时优先以此配置为准。V2.1.0及以上
progressbar_enable是否完全禁止进度条拖动无1为0时禁止进度拖动，为1时允许拖动快进退V2.1.0及以上
clientUserId故障数据上报 自定义IDstring无此字段为故障数据上报时上报的终端自定义ID，作为数据筛选时的唯一标识V2.1.0及以上
closeHistoryTime关闭记忆播放功能Number默认值：0设置是否关闭记忆播放功能。0，使用； 1，关闭V2.1.0及以上
showHdBtn是否显示清晰度选择按钮Booleantrue为false时不显示按钮V2.3.0及以上
allowSelectHd清晰度是否可选择Booleantrue为false时, 显示清晰度按钮但不可选择V2.3.0及以上
defaultDf视频默认清晰度Number无若指定清晰度不存在则无效V2.3.0及以上
definitions显示指定清晰度Array无eg: [10, 40] 仅显示指定且存在的清晰度，若都不存在则显示全部清晰度V2.3.0及以上
allowMaxDf允许播放的最高清晰度Number无不可播放的清晰度依旧显示（不可点击）V2.3.0及以上
isShowExercise是否显示课堂练习Boolean无为false时，不显示V2.3.1及以上
isShowVisitor是否显示访客信息收集器Boolean无为false时，不显示V2.3.1及以上
isShowQuestions是否显示问答Boolean无为false时，不显示V2.3.1及以上
watchStartTime开始播放时间Number无从第几秒开始播放，需大于0且小于视频时长V2.3.2及以上
canSkipExercises控制所有课堂练习是否允许跳过Boolean无为true时，允许跳过。播放器配置此参数时优先级大于admin设置v2.3.3及以上
isShowRightMenu控制显示右侧菜单是否显示Boolean无为false时隐藏（优先级高于admin设置V2.3.4及以上
rightMenu设置右侧菜单显示项Array无如：[1,2]表示显示按钮1、按钮2（仅可以显示已创建的按钮V2.3.4及以上
loadingPic设置缓冲片头地址String无设置片头地址V2.3.4及以上
isOpenLoadingPic是否开启缓冲片头Booleantruefalse 关闭V2.3.4及以上
playListStyle列表样式Number11图文，2纯文字（优先级大于admin后台播放器设置V2.3.4及以上
playListExpand默认是否展开Number11展开，0折叠V2.3.4及以上
loop是否循环播放Boolean无为true时，视频结束后循环播放V2.3.5及以上
loopTimes控制循环播放次数Number无空表示无限循环，数值表示循环次数， 使用此参数需loop为true时V2.3.5及以上
exercises控制显示哪些练习Array无如：[1,2]表示显示此视频第1、2个练习V2.3.5及以上
playReadyShowCtrol进入观看页面是否显示进度条Boolean无为true时，初始化进入观看页面时显示进度条V2.4.1及以上
freeTime试看时长Number无单位为“秒”，设置试看时长，为空时表示未开启试看功能。时长一分钟内按秒单位显示，超出一分钟按整分钟显示V2.4.5及以上
freeTimeTip试看中文案提示Object无示例：freeTimeTip = {msg: "xxxxxxxxxx",linkText: "购买",linkUrl: "xxxxxx" }分别设置试看中的提示文案、文字按钮名称、点击按钮跳转链接；若未设置则不显示V2.4.5及以上
freeTimeEndTip配置试看结束显示Object无示例：freeTimeEndTip: {msg: "xxxxxxxxxx",linkText: "购买",linkUrl: "xxxxxx"}分别设置试看结束页面 提示文案、按钮名称、点击按钮跳转链接；若未设置则不显示V2.4.5及以上
logo设置logoObject无示例logo: {url: 'xxxxxx', // logo 地址 opacity: 70, // 透明度 [0-100] position: 4, // logo位置原始点 1-左上，2-右上， 3-左下， 4-右下 linkUrl: '', // logo跳转链接 posX: 5, // logo相对于原始点的水平百分比距离 posY: 7, // logo相对于原始点的垂直百分比距离 size: 10, // 显示区域大小（相对于播放器宽高百分比） },V2.5.0及以上
allowKeyBoardTogglePlay是否允许空格控制播放暂停Boolean无false为禁止，仅对PC端生效V2.5.1及以上
showRateBtn是否显示倍速选择按钮Boolean无false为隐藏V2.5.1及以上
showFullScreenBtn是否显示全屏按钮Boolean无false为隐藏V2.5.1及以上
allowFullScreen是否禁用全屏功能Boolean无false为禁止，禁止后双击全屏和点击全屏按钮全屏都将失效V2.5.1及以上

vc、customerId、isSkipAd这几个参数可以在播放器相关回调方法中返回，如果回调获取到值，将用回调获取的值替换配置的值。

免责声明： 以上内容版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。感谢每一位辛勤著写的作者，感谢每一位的分享。
@小牛知识库 xnip.cn