回放SDK

[TOC]

房间

概述

可获取直播间当前流类型信息、监听用户登录成功、失败

播放器

概述

可监听播放器加载完成、准备完成、播放开始、暂停、恢复、停止事件；可获取回放打点、跳转到指定时间播放、获取当前播放时间、获取视频总时长；可监听讲师端启动区域分享/桌面共享的开始、结束事件支持记忆上次观看时间

相关API

基本

播放器加载完成

window.on_cc_live_player_load = function () {}

播放器准备完成

window.on_cc_player_ready = function () {}

开始观看回放

window.on_cc_callback_play = function () {
  console.log('回放开始播放了')
}

播放开始

仅支持PC端

window.on_player_start = function () {}

播放暂停

仅支持PC端

window.on_spark_player_pause = function () {}

恢复播放

仅支持pc端

window.on_spark_player_resume = function () {}

播放停止

仅支持pc端

window.on_spark_player_end = function () {}

回放打点

window.on_cc_loadDotPointsData = function (data) {
    console.log(data)
}
data: [
    {
        time: 0 // s
        desc: 'xxxx'
    }
]

播放暂停

$.DW.play()

跳转到指定时间播放

$.DW.seek(time, status, callback)   // 跳转到指定时间播放，time单位为秒

参数说明

参数名称	参数类型	说明	是否必须
time	Number	单位秒	是
status	String	'play': 完成seek后播放回放 'pause': 完成seek后暂停回放	否
callback	Function	完成seek后执行的回调函数	否

获取视频缩略图

回放生成缩略图需要联系客服开通缩略图预览权限生成的回放缩略图是一张1600x900的大雪碧图，为10分钟的截图数据，6秒截一张图，每张小图大小160x90，共10行10列，需要使用css定位展示对应时间点小图

$.DW.getVideoPreview(time) // 获取指定时间的视频缩略图信息， time单位为秒

返回值说明

{
  "time": 100, // 请求缩略图的时间
  "videoPreviews": [
    {
      "url": "//img-test212.play.bokecc.com/comimage/FAA3DD658CB47E29/2023-11-24/F978EAA4B676690D9C33DC5901307461_thumbnail_000.jpg"
    },
    {
      "url": "//img-test212.play.bokecc.com/comimage/FAA3DD658CB47E29/2023-11-24/F978EAA4B676690D9C33DC5901307461_thumbnail_001.jpg"
    },
    {
      "url": "//img-test212.play.bokecc.com/comimage/FAA3DD658CB47E29/2023-11-24/F978EAA4B676690D9C33DC5901307461_thumbnail_002.jpg"
    }
  ], // 缩略图列表原数据
  "current": { // 请求时间点缩略图信息
    "url": "//img-test212.play.bokecc.com/comimage/FAA3DD658CB47E29/2023-11-24/F978EAA4B676690D9C33DC5901307461_thumbnail_000.jpg", // 雪碧图地址
    "width": 160, // 请求时间点缩略图宽度
    "height": 90, // 请求时间点缩略图高度
    "x": -960, // 请求时间点缩略图在雪碧图中定位x
    "y": -90 // 请求时间点缩略图在雪碧图中定位y
  }
}

示例

<div id="video-preview" class="video-preview">
    <div id="preview-image" class="preview-image"></div>
</div>

// 自定义进度控制条mousemove事件
barmousemove: function (e) {
    var thisX = (e || b.event).offsetX;
    var max = this.offsetWidth
    var percent = thisX * 100 / max;
    var previewSecond = parseInt($.DW.getDuration() * parseInt(percent) / 100)
    // 获取视频缩略图
    var videoPreviewData = $.DW.getVideoPreview(previewSecond)
    // 展示视频缩略图
    let videoPreviewLeft = 0
    if (videoPreviewData.videoPreviews.length !== 0){
        videoPreviewLeft = thisX - videoPreviewData.current.width / 2;
    }
    // 边界限制
    if (videoPreviewLeft < 0) {
        videoPreviewLeft = 0;
    }
    if (videoPreviewLeft > max - videoPreviewData.current.width) {
        videoPreviewLeft = max - videoPreviewData.current.width;
    }
    const videoPreviewDOM = document.querySelector('#video-preview')
    videoPreviewDOM.style.display = 'block';
    videoPreviewDOM.style.left = videoPreviewLeft + 'px';
    const previewImageDOM = document.querySelector('#preview-image')
    previewImageDOM.style.width = videoPreviewData.current.width + 'px'
    previewImageDOM.style.height = videoPreviewData.current.height + 'px'
    previewImageDOM.style.backgroundImage = "url('"+ videoPreviewData.current.url +"')"
    previewImageDOM.style.backgroundPosition = videoPreviewData.current.x + "px "  + videoPreviewData.current.y + "px";
}

获取当前播放时间

$.DW.getPlayerTime();   // 获取当前播放时间

获取视频总时长

window.on_cc_live_player_load = function () { // 播放器加载完毕
    console.log($.DW.getDuration()); // 获取视频总时长
};

获取缓存

$.DW.getBuffer()

销毁

$.DW.destroy()

获取视频画面缩放比例

$.DW.getZScale()

仅支持Flash播放器

设置视频画面缩放比例

$.DW.setZScale()

number（0-1），仅支持Flash播放器

获取视频窗口比例

$.DW.getScale()

仅支持Flash播放器

设置视频窗口比例

$.DW.setScale()

（"full", "scale43", "scale169", "original"），仅支持Flash播放器

打开设置面板

$.DW.openSettingPanel()

仅支持Flash播放器

控制条

视频控制条切换显示/隐藏状态

$.DW.isShowBar(tag)

参数说明

参数名称	参数类型	说明	是否必须
tag	Number	0：显示控制条 1：隐藏控制条默认为打开	是

全屏

回放视频切换全屏状态

$.DW.switchFullScreen(tag)

参数说明

参数名称	参数类型	说明	是否必须
tag	Boolean	true：进入全屏 false：退出全屏	是

音量

设置音量

$.DW.setVolume(volume)

参数说明

参数名称	参数类型	说明	是否必须
volume	Number	取值范围 0 ~ 1	是

获取当前音量

$.DW.getVolume()

倍速

倍速播放

$.DW.playbackRate()

默认1.0 正常速度，倍速设置范围0.5～2倍速，仅支持H5播放器

音频播放

切换音视频模式播放

$.DW.onlyAudio(tag) // tag: true 为音频模式, false 为视频模式

切换音视频首先要 proton 打开回放支持音频权限并且只对开启之后新生成的回放生效

快进快退

快进

$.DW.seekForward(time) // time: 20 // 前进的秒数 (正整数)

快退

$.DW.seekBack(time) // time: 10 // 后退的秒数 (正整数)

共享

开始分享流（区域分享/桌面共享）

window.on_cc_live_sharestream_start = (data) => {
    // ...
}

Windows平台 5.5.0开始支持，Mac平台5.6.0开始支持

返回值

{ 
    "time": 2000,  //  相对回放开始点的相对偏移量（毫秒）
    "type": 40  // 40: 区域分享, 50: 桌面共享 
}

结束分享流（区域分享/桌面共享）

window.on_cc_live_sharestream_end = (data) => {
    // ... 
}

Windows平台 5.5.0开始支持，Mac平台5.6.0开始支持

返回值

{ 
    "time": 3000,  //  相对回放开始点的相对偏移量（毫秒） 
    "type": 40  // 40: 区域分享, 50: 桌面共享 
}

截图

$.DW.clipVideoImage()

该方法会截取视频图像，并且返回base64的视频图像的内容(目前只支持h5播放器)

跑马灯

视频显示跑马灯

$.DW.showMarquee(marquee)

示例

var marquee = $("#viewerMarquee").text();
$.DW.getMarquee = function(data) {
    // console.log('getMarquee 跑马灯数据', data)
    if (!!data) {
        marquee = data;
        return;
    }
    marquee = $("#viewerMarquee").text();
    $.DW.showMarquee(marquee);
};

记忆播放点

获取记忆播放时间点

播放器会默认记录视频上次观看到的时间点。同一浏览器打开同一回放资源，可从上次观看的时间点继续播放。

$.DW.getHistoryPlayTime();

设置记忆播放时间点

设置视频从指定的秒数开始播放。

$.DW.setHistoryPlayTime(second);

回放试看

获取回放试看时长

window.on_cc_player_freetime = function (time) {}

time单位为秒

监听回放试看结束

window.on_cc_player_freetime_end = function() {}

文档

概述

支持文档翻页、文档自适应、文档显示跑马灯

聊天

概述

可获取直播过程中的聊天数据并展示

问答

概述

可获取直播过程中的问答信息并展示

互动

概述

可获取直播过程中的广播、随堂测数据并展示

备注与说明

关于回放数据分片策略的调整

重要提示：

本次更新为优化回放数据的响应速度，减少文档白屏时间，升级了回放数据的处理策略，将回放数据进行静态化存储，回放数据将按照固定大小（约512kb）被分割为不同的分片，静态化存储为json文件。

分片加载策略：默认会请求第一个分片数据，其他分片会提前五分钟预加载，当seek播放时如果当前时间点的数据还未被请求则会触发该分片加载，请注意，如果seek时间跨度较大有可能出现跨分片的情况，此时只会处理seek时间点所在的分片

该策略主要影响以下响应事件，请重点关注

API	Before	After
on_cc_live_chat_msg	全部聊天信息	当前分片聊天信息
on_cc_live_chat_msg_sync	同步显示聊天信息（包括当前时间点之前未渲染的数据）	仅返回当前时间点聊天信息
on_cc_seeked_chat_msg	无	seek时间点之前的聊天数据
on_cc_live_broadcast_msg	全部广播信息	当前分片广播信息
on_cc_live_qa_question	全部提问信息	当前分片提问信息
on_cc_live_qa_answer	全部回答信息	当前分片回答信息
on_cc_callback_pages	所有文档翻页信息	当前分片文档翻页信息
on_cc_callback_pages	所有文档缩略图	当前分片文档缩略图

升级指南

本次升级不会影响回放顺序播放的数据渲染，主要在seek播放时数据有可能会有些差异，如果针对seek操作时的数据渲染有时间排序要求，可参考以下建议：

1.针对要接收的数据增加本地数组存储，新增数据时判断其时间是否大于最后一条数据的时间，若小于则对本地数据进行排序处理，排序后再进行渲染。

2.如果聊天数据要求跟随进度条进度渲染需要同时注册on_cc_live_chat_msg_sync、on_cc_seeked_chat_msg，接收到on_cc_seeked_chat_msg数据时替换渲染数组，接收到on_cc_live_chat_msg_sync数据时追加到渲染数组中。

注：广播、文档翻页数据一般不会被分片

部分回调对推流客户端版本有要求

流类型详情回调（on_cc_live_streaminfo）、分享流开始回调（on_cc_live_sharestream_start）、分享流结束回调（on_cc_live_sharestream_end）的数据采集对推流客户端版本有要求，Windows平台 5.5.0开始支持，Mac平台5.6.0开始支持

userRole和fromuserrole对应关系

如下表：

unknow	未知角色
publisher	主讲
teacher	助教
host	主持人
student	学员（观众）

回放SDK

房间

概述

相关API

信息

当前流类型信息

用户

登录成功

登录失败

播放器

概述

相关API

基本

播放器加载完成

播放器准备完成

开始观看回放

播放开始

播放暂停

恢复播放

播放停止

回放打点

播放暂停

跳转到指定时间播放

获取视频缩略图

获取当前播放时间

获取视频总时长

获取缓存

销毁

获取视频画面缩放比例

设置视频画面缩放比例

获取视频窗口比例

设置视频窗口比例

打开设置面板

控制条

视频控制条切换显示/隐藏状态

全屏

回放视频切换全屏状态

音量

设置音量

获取当前音量

倍速

倍速播放

音频播放

切换音视频模式播放

快进快退

快进

快退

共享

开始分享流（区域分享/桌面共享）

结束分享流（区域分享/桌面共享）

截图

截图

跑马灯

视频显示跑马灯

记忆播放点

获取记忆播放时间点

设置记忆播放时间点

回放试看

获取回放试看时长

监听回放试看结束

文档

概述

相关API

基本

当前分片文档翻页信息/ 文档缩略图

翻页信息回调

文档自适应

跑马灯

文档显示跑马灯

聊天

概述

相关API

当前分片聊天信息

当前时间点聊天信息

seek时间点之前的聊天数据

获取自定义表情列表

问答

概述

相关API

当前分片提问信息

400-993-9696

marketing@bokecc.com

北京市海淀区北三环中路44号海淀文教产业园F座4层