点击查看在线demo(标准版)

点击查看在线demo(VUE版)

点击下载demo

一、版本说明

1、版本

最新版本 V2.5.3 日期 2021-03-016

2、版本更新记录

更新日期 版本号 更新内容
2021-03-16 2.5.3 新增自适应字幕功能及播放器“更多”按钮显示状态控制
2021-03-03 2.5.2 新增微信浏览器同层播放功能
2021-02-02 2.5.1 1、新增倍速按钮显示控制参数 2、新增PC端全屏禁用和显示控制参数
2021-01-28 2.5.0 新增自定义logo参数
2021-01-26 2.4.11 新增自定义问答回看时回调
2020-12-24 2.4.8 新增自定义问答功能答错解析字段
2020-12-22 2.4.7 优化【开始播放时间】参数使用方法(可跳过问答等信息)及部分兼容问题
2020-12-15 2.4.6 问答功能支持自定义配置
2020-12-08 2.4.5 新增试看功能配置参数使用方式(试看时长、试看提示文案、试看跳转链接、试看结束文案、试看结束跳转链接)
2020-11-25 2.4.3 新增切换视频沿用上个视频设置参数(音量、倍速、清晰度)功能
2020-11-24 2.4.2 修复部分机型微信内ts格式切换清晰度重新播放问题
2020-11-18 2.4.1 1、新增播放底部面板显示参数 2、新增查询视频播放暂停状态接口
2020-11-11 2.4.0 1、新增缓冲中回调 2、新增缓冲结束回调 3、新增全屏api 4、新增获取全屏状态api 5、新增获取当前清晰度api 6、新增获取当前倍速api
2020-11-05 2.3.6 新增错误码回调
2020-11-02 2.3.5 1、新增课堂练习题目显示项控制参数 2、新增循环播放及循环播放次数参数
2020-10-27 2.3.4 新增6个参数配置 1、控制右侧菜单是否显示参数 2、设置右侧菜单显示项 3、设置缓冲片头地址 4、是否开启缓冲片头 5、播放列表样式 6、播放列表是否默认展开
2020-10-15 2.3.3 新增课堂练习跳过控制参数
2020-10-15 2.3.2 新增 开始播放时间 参数
2020-09-25 2.3.1 新增问答、课堂练习、访客信息收集器是否显示参数配置
2020-09-24 2.3.0 1、新增暂停视频广告、片尾视频及图片广告功能 2、新增5个清晰度相关参数配置 3、修复部分机型微信内切换清晰度会从头播放问题
2020-08-12 2.2.1 新增静音自动播放配置参数
2020-08-04 2.2.0 js代码支持 H5播放列表
2020-07-16 2.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 视频id String 视频id需与用户id匹配,js代码播放时必填 V2.1.0及以上
siteid 用户id String 必填 V2.1.0及以上
width 播放器宽度 Number/Percent 100% 可省略px只写数据,百分比时需加% V2.1.0及以上
height 播放器高度 Number/Percent 100% 可省略px只写数据,百分比时需加% V2.1.0及以上
autoStart 自动播放 Boolean false 是否自动播放(Chrome等部分浏览器会存限制导致无法自动播放,若需要绕过浏览器限制请使用参数 静音自动播放-realAutoPlay ) V2.1.0及以上
realAutoPlay 静音自动播放 Boolean 静音自动播放,仅PC端有效 V2.2.1及以上
playtype 构造播放器时指定播放器类型(FLASH 或 H5) Number 指定播放器类型,为0时FLASH播放器;为1时H5播放器,其他值无效 V2.1.0及以上
isShare 显示分享界面 Boolean false 为true时播放器上可让用户分享当前播放视频 V2.1.0及以上
banDrag 禁止跳过播放 Boolean false 为true时不允许快进至未观看部分(已观看部分可自由快进快退) V2.1.0及以上
forward 快进快退步长 Number/Percent 5 按左右方向键时会快退或快进,默认是5秒,配置数字时按固定秒数快进或快退,配置百分比时,按视频百分比快进快退 V2.1.0 及以上
isSkipAd 是否跳过广告 Number 0 为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 播放器默认倍速 Number 1 设置播放器默认倍速,值为已知倍速列表中的倍速值 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 是否允许切换倍速 Boolean true 设置是否允许切换倍速 V2.1.0及以上
open_barrage 是否开启弹幕 Boolean 设置是否开启弹幕,默认以admin设置为准,播放器配置此参数时优先以此配置为准。 V2.1.0及以上
progressbar_enable 是否完全禁止进度条拖动 1 为0时禁止进度拖动,为1时允许拖动快进退 V2.1.0及以上
clientUserId 故障数据上报 自定义ID string 此字段为故障数据上报时上报的终端自定义ID,作为数据筛选时的唯一标识 V2.1.0及以上
closeHistoryTime 关闭记忆播放功能 Number 默认值:0 设置是否关闭记忆播放功能。0,使用; 1,关闭 V2.1.0及以上
showHdBtn 是否显示清晰度选择按钮 Boolean true 为false时不显示按钮 V2.3.0及以上
allowSelectHd 清晰度是否可选择 Boolean true 为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 是否开启缓冲片头 Boolean true false 关闭 V2.3.4及以上
playListStyle 列表样式 Number 1 1图文,2纯文字(优先级大于admin后台播放器设置 V2.3.4及以上
playListExpand 默认是否展开 Number 1 1展开,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 设置logo Object 示例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及以上
useX5Play 开启同层播放 Boolean 为true时代表启用同层播放 V2.5.2及以上
subtitleModel 字幕字体大小模式 Number 0 1为字幕自适应模式,0为固定模式; 参数设置优先级高于admin设置 V2.5.3及以上
isShowMoreBtn 是否显示右上角更多按钮 Boolean true 为false时不显示按钮 V2.5.3及以上
isShowUrlBtn 是否显示切换线路按钮 Boolean true 为false时不显示按钮 V2.5.3及以上

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

results matching ""

    No results matching ""