WEB 回放观看SDK开发指南

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云直播产品使用方法有基础的了解，使用帮助地址

1.4 开发环境

能够进行前端开发的IDE

2 开发配置

页面引入 jQuery：

<script src="//view.csslcloud.net/js/jquery-1.9.0.min.js" type="text/javascript"></script>

页面引入 SDK：

<script src="//view.csslcloud.net/js/sdk/3.0.0/playbackSDK.js" type="text/javascript"</script>

2.1 快速集成

<!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>

参数	说明
userId	用户id，不可为空，必选参数
roomId	直播间id，不可为空，必选参数
recordId	回放id，不可为空为必选（取消不传recordId，传入liveId可播放，如果该参数不存在会抛出异常）
groupId	分组id，可为空，可选参数
viewername	观看者名字，可为空，接口验证时必填
viewertoken	观看密码，可为空，接口验证时必填
isH5play	PC端是否启用H5播放器，可选参数，默认true启用h5播放器，false为启用flash播放器（不支持H5的浏览器，该参数无效，默认使用Flash播放器）
fastMode	可选参数，默认为true开启极速文档，为false时则使用flash文档加载

2.3 回放响应事件 API

登录成功回调

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："名称" // 观看者名称
    }
}

聊天发送成功回调

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": ""
}

接收广播消息成功回调

window.on_cc_live_broadcast_msg = function(data){
  console.log(data)
}
参数data:
{
    content: "大家好",//广播内容
    time: 205 //广播时间
}

跳转到指定时间播放

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

获取当前播放时间

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

获取视频总时长

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

文档自适应

$.DW.docAdapt(true); // true为打开自适应，false为关闭，默认为关闭，仅支持PC端

附录

更多API请参考:DOC目录下文档说明