|
|
|
## 1.概述
|
|
|
|
Live_Web_Play_SDK 是一个适用于WEB平台的直播SDK，使用此SDK可以与CC视频云服务进行对接，在WEB端使用CC视频的直播回放功能,本SDK只针对Web播放端。
|
|
|
|
|
|
|
|
### 1.1 功能特性
|
|
|
|
| 功能 | 描述 |
|
|
|
|
| :----------- | :------------------- |
|
|
|
|
| 回放视频 | 观看直播回放视频 |
|
|
|
|
| 文档展示 | 观看直播时展示的文档 |
|
|
|
|
| 问答 | 观看直播时的问答 |
|
|
|
|
| 历史聊天数据 | 观看历史聊天数据 |
|
|
|
|
| 房间信息 | 观看直播间信息 |
|
|
|
|
|
|
|
|
### 1.2 依赖库
|
|
|
|
|
|
|
|
回放SDK依赖于 jQuery，请自行引入 jQuery 库，版本没有要求。
|
|
|
|
|
|
|
|
### 1.3 阅读对象
|
|
|
|
|
|
|
|
本文档为技术文档，需要阅读者：
|
|
|
|
|
|
|
|
- 具备基本的html、css、javascript开发能力
|
|
|
|
- 准备接入CC视频的直播回放SDK相关功能
|
|
|
|
- 对CC云直播产品使用方法有基础的了解，[使用帮助地址](https://doc.bokecc.com/live/web_sdk.html/)
|
|
|
|
|
|
|
|
### 1.4 开发环境
|
|
|
|
|
|
|
|
- 能够进行前端开发的IDE
|
|
|
|
|
|
|
|
## 2 开发配置
|
|
|
|
**页面引入 jQuery：**
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
<script src="//view.csslcloud.net/js/jquery-1.9.0.min.js" type="text/javascript"></script>
|
|
|
|
```
|
|
|
|
|
|
|
|
**页面引入 SDK：**
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
<script src="//view.csslcloud.net/js/sdk/3.0.0/playbackSDK.js" type="text/javascript"</script>
|
|
|
|
```
|
|
|
|
### 2.1 快速集成
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
<!DOCTYPE html>
|
|
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
<title>LiveSDK</title>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<!-- 回放视频模块 -->
|
|
|
|
<div id="playbackPlayer" style="width: 400px;height: 300px"></div>
|
|
|
|
|
|
|
|
<!-- 回放文档模块 -->
|
|
|
|
<div id="playbackPanel"></div>
|
|
|
|
<script src="//view.csslcloud.net/js/jquery-1.9.0.min.js" type="text/javascript"></script>
|
|
|
|
<script src="//view.csslcloud.net/js/common.js"></script>//用于激活flash插件
|
|
|
|
<script src="//view.csslcloud.net/js/sdk/3.0.0/playbackSDK.js" type="text/javascript"></script>
|
|
|
|
<script>
|
|
|
|
// 回放SDK参数配置
|
|
|
|
$.DW.config({
|
|
|
|
userId: '40A53587B37573BD',
|
|
|
|
roomId: '427DB068D5EAB1279C33DC5901307461',
|
|
|
|
recordId: 'EC1B04840FE9DBE9',
|
|
|
|
groupId : "groupId",
|
|
|
|
viewername: 'hdplayback',
|
|
|
|
viewertoken: '123',
|
|
|
|
isH5play:true,
|
|
|
|
fastMode:true
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|
|
```
|
|
|
|
|
|
|
|
### 2.2 使用方法
|
|
|
|
|
|
|
|
**视频模块：**
|
|
|
|
|
|
|
|
```
|
|
|
|
<div id="playbackPlayer"></div>
|
|
|
|
```
|
|
|
|
|
|
|
|
**文档模块：**
|
|
|
|
|
|
|
|
```
|
|
|
|
<div id="playbackPanel"></div>
|
|
|
|
```
|
|
|
|
|
|
|
|
**初始化：**
|
|
|
|
|
|
|
|
```
|
|
|
|
<script type="text/javascript">
|
|
|
|
$.DW.config({
|
|
|
|
userId: 'userId',
|
|
|
|
roomId: 'roomId',
|
|
|
|
recordId: 'recordId',
|
|
|
|
groupId : "groupId",
|
|
|
|
viewername: 'name',
|
|
|
|
viewertoken: 'password',
|
|
|
|
isH5play:true,
|
|
|
|
fastMode:true
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
```
|
|
|
|
|
|
|
|
<table width="900px">
|
|
|
|
<tr style="background:#F60;color:#FFF">
|
|
|
|
<td>参数</td>
|
|
|
|
<td>说明</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>userId</td>
|
|
|
|
<td>用户id，不可为空，必选参数</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>roomId</td>
|
|
|
|
<td>直播间id，不可为空，必选参数</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>recordId</td>
|
|
|
|
<td>回放id，不可为空为必选（取消不传recordId，传入liveId可播放，如果该参数不存在会抛出异常）</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>groupId</td>
|
|
|
|
<td>分组id，可为空，可选参数</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>viewername</td>
|
|
|
|
<td>观看者名字，可为空，接口验证时必填</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>viewertoken</td>
|
|
|
|
<td>观看密码，可为空，接口验证时必填</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>isH5play</td>
|
|
|
|
<td>PC端是否启用H5播放器，可选参数，默认true启用h5播放器，false为启用flash播放器（不支持H5的浏览器，该参数无效，默认使用Flash播放器）</td>
|
|
|
|
</tr>
|
|
|
|
<tr>
|
|
|
|
<td>fastMode</td>
|
|
|
|
<td>可选参数，默认为true开启极速文档，为false时则使用flash文档加载</td>
|
|
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
|
|
|
|
### 2.3 回放响应事件 API
|
|
|
|
|
|
|
|
##### 登录成功回调
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
window.on_cc_login_success = function(data){
|
|
|
|
console.log(data)
|
|
|
|
}
|
|
|
|
参数data:
|
|
|
|
{
|
|
|
|
template:{
|
|
|
|
desc:"视频", //模板描述信息
|
|
|
|
name:"模板一",//模板名称
|
|
|
|
type:"1" //模板类型 （1:大屏模式 ，2：问答、视频、聊天 ，3：视频、聊天，4：文档、视频。聊天，5：视频、文档、问答、聊天，6：视频、问答
|
|
|
|
},
|
|
|
|
viewer:{
|
|
|
|
id:"ae4dec",// 观看者id
|
|
|
|
groupId："1",// 观看者分组id
|
|
|
|
name："名称" // 观看者名称
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
##### 聊天发送成功回调
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
window.on_cc_live_chat_msg = function(data){
|
|
|
|
console.log(data);
|
|
|
|
}
|
|
|
|
参数data:
|
|
|
|
{
|
|
|
|
"//": "聊天消息id",
|
|
|
|
"chatId":"23981",
|
|
|
|
"//": "聊天消息状态 0:显示 1:不显示",
|
|
|
|
"status":"1",
|
|
|
|
"//": "发送聊天消息的用户ID",
|
|
|
|
"userid": "7f3a0c7c496a4a2b86d8e51e358193fd",
|
|
|
|
"//": "发送聊天消息的用户名称",
|
|
|
|
"username": "老张",
|
|
|
|
"//": "发送时间",
|
|
|
|
"time": 20,
|
|
|
|
"//": "聊天内容",
|
|
|
|
"msg": "Hello World.",
|
|
|
|
"//": "发送者头像",
|
|
|
|
"useravatar": "http://www.bokecc.com/static/cms/image/cc-video/navlogo-big.png",
|
|
|
|
"//": "发送者角色，student：学生，teacher：助教，publisher：讲师",
|
|
|
|
"userRole": "student",
|
|
|
|
"//": "分组信息",
|
|
|
|
"groupId"："111",
|
|
|
|
"//": "用户自定义参数",
|
|
|
|
"usercustommark": ""
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
##### 接收广播消息成功回调
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
window.on_cc_live_broadcast_msg = function(data){
|
|
|
|
console.log(data)
|
|
|
|
}
|
|
|
|
参数data:
|
|
|
|
{
|
|
|
|
content: "大家好",//广播内容
|
|
|
|
time: 205 //广播时间
|
|
|
|
}
|
|
|
|
```
|
|
|
|
|
|
|
|
#### 跳转到指定时间播放
|
|
|
|
|
|
|
|
```
|
|
|
|
$.DW.seek(time); // 跳转到指定时间播放，time单位为秒
|
|
|
|
```
|
|
|
|
|
|
|
|
#### 获取当前播放时间
|
|
|
|
|
|
|
|
```
|
|
|
|
$.DW.getPlayerTime(); // 获取当前播放时间
|
|
|
|
```
|
|
|
|
|
|
|
|
#### 获取视频总时长
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
window.on_cc_live_player_load = function () { // 播放器加载完毕
|
|
|
|
console.log($.DW.getDuration()); // 获取视频总时长
|
|
|
|
};
|
|
|
|
```
|
|
|
|
|
|
|
|
#### 文档自适应
|
|
|
|
|
|
|
|
```
|
|
|
|
$.DW.docAdapt(true); // true为打开自适应，false为关闭，默认为关闭，仅支持PC端
|
|
|
|
```
|
|
|
|
|
|
|
|
### 附录
|
|
|
|
|
|
|
|
更多API请参考:DOC目录下文档说明 |
|
|
|
\ No newline at end of file |
