版本:3.6.0
日期:2021年01月15日
利用WEB SDK可以与CC视频直播系统进行对接,灵活调用直播和回放的视频、文档、聊天、问答等模块,在您的网页中实现自定义样式界面展示直播和回放。
- Chrome 60+- Firefox 52+- IE9+- Edge- Safari 10+
直播SDK依赖于jQuery,请自行引入 jQuery 库,版本没有要求。
页面引入 jQuery:
xxxxxxxxxx<script src="//view.csslcloud.net/js/jquery-1.9.0.min.js" type="text/javascript"></script>
页面引入 JS SDK:
xxxxxxxxxx<script src="//view.csslcloud.net/js/sdk/3.6.0/liveSDK.js" type="text/javascript"></script>
视频模块:
xxxxxxxxxx<div id="livePlayer"></div>
文档模块:
xxxxxxxxxx<div id="drawPanel"></div>
初始化:
xxxxxxxxxx<script type="text/javascript">DWLive.init({userid: 'userid',//必须参数roomid: 'roomid',//必须参数groupid: "groupid", //可选viewername: 'name',//可选viewertoken: 'password',//如果直播间设置为密码验证,必选viewercustomua: 'android',//可选language: 'en',//可选pcH5Live:true,//可选viewercustominfo: '{"exportInfos": [ {"key": "城市", "value": "北京"}, {"key": "姓名", "value": "哈哈"}]}',//可选fastMode:true//可选参数,默认为true});</script>
| 参数 | 说明 |
| userid | 用户 id,不可为空 |
| roomid | 直播间id,不可为空 |
| groupid | 分组id,可为空 |
| viewername | 用户名称,可为空 |
| viewertoken | 需要密码验证方式时,不可为空 |
| viewercustomua | 自定义UA参数,配合接口验证使用,可为空 |
| pcH5Live | 是否开启h5直播,不支持ie及其内核浏览器 |
| language | en,英文版flash播放器,可为空 |
| viewercustominfo | json格式字符串,可选,自定义用户信息,该信息会记录在用户访问记录中,用于统计分析使用(长度不能超过1000个字符,若直播间启用接口验证则该参数无效) |
| fastMode | 是否开启极速动画模式,默认是开启极速动画模式,默认参数为true |
| API | 说明 |
| sendPublicChatMsg(msg) | 发送公聊,msg:消息内容 |
| sendPrivateChatMsg(touserid,tousername,msg) | 发送私聊, touserid:接收者的viewerid,tousername:接收者的viewername,msg:消息内容 |
| sendQuestionMsg(msg) | 发送问题,msg:消息内容 |
| barrage(msg, color) | 发送弹幕,color为十六进制颜色值(0xffffff),仅支持PC端 |
| getLine() | 获取线路 |
| changeLine(num) | 切换线路,num: getLine返回的值(0,1) |
| onlyAudio() | 只听音频 (PC端H5播放器暂不支持) |
| setSound(num) | 音量调节,num: 0-1 |
| answerRollcall(rid, pid) | 签到,rid:rollcallId,pid:publisherId |
| replyVote(voteid, option, pid) | 答题,voteid:voteId,option:答题选项,pid:publisherId |
| docBarrage(msg, color) | 文档弹幕,color为十六进制颜色值(0xffffff),仅支持PC端 |
| openBarrage(true/false) | 弹幕开关,仅支持PC端 |
| showControl(true/false) | 控制条显示隐藏 |
| switchFullScreen(true/false) | 直播视频全屏(H5播放器) |
| requestInteraction | 请求语音互动 |
| hangupInteraction | 挂断双向视频 |
| enterInteractionRoom | 进入互动房间 |
| sendInteractionMessage | 发送互动信息 |
| docAdapt(true/false) | 文档自适应,默认为false关闭自适应,仅支持PC端 |
| showMarquee | 视频显示跑马灯,仅支持PC端 |
| closeMarquee | 视频关闭跑马灯,仅支持PC端 |
| showMarqueeDoc | 文档显示跑马灯,仅支持PC端 |
| closeMarqueeDoc | 文档关闭跑马灯,仅支持PC端 |
| logout(obj) | 退出;obj.success:退出成功回调;obj.error:退出失败回调; |
| playerBackgroundImageUri | 获取播放器自定义背景图片 |
| playerBackgroundHint | 获取播放器自定义提示语 |
| liveCountdown | 直播倒计时 |
| getPublishingQuestionnaire | 直播中获取问卷 |
| changeNickname(name) | 修改用户昵称,name:昵称,长度小于20 |
| setDocMode(type) |
切换文档模式,参数 type 值为: DWLive.DocModeType.NormalMode:切换至跟随模式(默认) DWLive.DocModeType.FreeMode:切换至自由模式 |
| getDocs(roomId,userId,callback) |
获取直播间所有文档信息,参数: roomId:直播间的ID(roomid) userId:CC账户ID(userid) callback:获取文档信息后的回调 |
| changePageTo(docId,pageIndex) |
跳转到指定文档页,参数: docId:要跳转到文档id pageIndex:要跳转到指定文档的页码 |
| submitQuestionnaire(data,callBack) |
提交问卷,参数: data:提交问卷的回答信息 callBack:提交成功后的回调 |
| getPracticeInfomation(pId,callBack) | 获取随堂测信息; 参数: pId:随堂测id(没有则传空字符串) callBack:响应回调 |
| submitPracticeInfo(pId,opt,callBack) | 提交随堂测; 参数: pId:随堂测Id opt:选择的选项id(多个选项用空格隔开) callBack:提交后响应回调 |
| getPracticeStatisInfo(pId, callBack) | 获取随堂测统计信息 参数: pId:随堂测id callBack:响应回调 |
| getPracticeRanking(pId,callBack) | 获取排名数据 参数: pId:随堂测Id callBack:响应回调 |
| getHdInquirePunchInformation(callBack) | 获取打卡信息 参数: callBack:响应回调 |
| hdCommitPunch(punchId,callBack) | 获取打卡信息 参数: punchId:打卡Id callBack:响应回调 |
| clipVideoImage() | 截取视频图像 说明: 该方法会截取视频图像, 并且返回base64的视频图像的内容(目前只支持h5播放器,ie和safari不受支持) |
| destroy() | 销毁 说明: 销毁对象意味着之前注册的回调事件监听失效, 再次使用需要重新初始化 |
| API | 说明 |
| onLoginSuccess | 登录成功 |
| on_hd_live_player_type | 当前播放器是h5还是flash播放器 |
| onLiveStart | 开始推流直播 |
| onLiveEnd | 停止推流直播 |
| onUserCountMessage | 在线人数 |
| onPublicChatMessage | 收到公聊 |
| onPublicChatLogManage | 收到聊天审核消息 |
| onPrivateChatMessage | 收到私聊 |
| onPrivateAnswer | 收到私聊回复 |
| onQuestion | 收到提问 |
| onAnswer | 收到回答 |
| onInformation | 直播间禁止聊天或问答时,发送消息的回调通知 |
| onKickOut | 踢出 |
| onAnnouncementShow | 开始直播后显示公告 |
| onAnnouncementRelease | 发布和修改公告 |
| onAnnouncementRemove | 删除公告 |
| onLoginError | 登录出现错误时的回调 |
| onLiveStarting | 移动web端直播中的回调 |
| onStartRollCall | 开始签到 |
| onStartLottery | 开始抽奖 |
| onWinLottery | 中奖 |
| onStopLottery | 结束抽奖 |
| onStartVote | 开始答题(voteType:0/1; 0为单选题,1为多选题) |
| onStopVote | 结束答题 |
| onVoteResult | 答题统计 |
| window.on_cc_live_interaction_accept | 讲师接受互动信息 |
| window.on_cc_live_interaction_message | 互动信息 |
| window.on_cc_live_interaction_chatusers | 已经在聊天的列表信息 |
| window.on_cc_live_interaction_disconnect | 挂断互动信息 |
| showUserCount | 是否显示在线人数(0为不显示,1为显示) |
| onLiveDesc | 显示简介 |
| onBroadcastMsg | 广播消息回调 |
| onQaPublish | 发布问题 |
| onRoomSetting | 直播间布局配置 |
| onQuestionnairePublish | 发布问卷 |
| onQuestionnairePublishStop | 结束发布问卷 |
| onQuestionnairePublishStatis | 发布问卷统计 |
| onOnlineTeachers | 获取讲师列表 |
| window.on_cc_swf_loading_completed | PC端直播播放器加载完成 |
| window._onStart | PC端直播中的回调 |
| onExternalQuestionnairePublish | 第三方问卷调查 |
| onPageChange | 翻页信息回调 |
| onChangeNickname | 修改用户昵称回调 |
| onLiveTime | 获取开始直播时间和直播时间(未开始直播返回 {liveStartTime: "", liveDuration: -1}) |
| onSwitchSource | 获取当前播放(数据源)场景 |
| onSwitchVideoDoc(main) | 布局切换;main(false: 文档为主; true: 视频为主;) |
| onSilenceUserChatMessage(toJson(data)) | 用户禁言后发送聊天的消息回调; data:禁言时发送信息回调数据 |
| onPracticePublish(data) | 随堂测发布消息回调; data:发送信息回调数据 |
| onPracticePublishStop(data) | 随堂测停止答题消息回调; data:回调数据 |
| onPracticeClose(data) | 关闭随堂测; data:回调数据 |
| onHdLiveStartPunch(data) | 开启打卡功能; data:回调数据 |
| onHdLiveStopPunch(data) | 停止打卡功能; data:回调数据 |
| onBanChat(data) | 禁言 |
| onUnBanChat(data) | 解除禁言 |
| onBanDeleteChat(data) | 禁言并删除聊天记录 |
| HDBanChatBroadcastWithData(data) | 用户禁言后群发消息通知; data:回调数据 |
| HDUserRemindWithAction(data) | 用户进出直播间消息通知; data:回调数据 |
| window.onSocketConnect() | socket链接成功回调; |
| window.onSocketDisconnect() | socket链接断开回调; |
xxxxxxxxxxDWLive.onLoginSuccess:{ template:{ desc:"视频", //直播间模版描述信息 name:"模板一", //直播间模版名称 type:"1" //直播间模板类型 (1:大屏模式 ,2:问答、视频、聊天 ,3:视频、聊天,4:文档、视频。聊天,5:视频、文档、问答、聊天,6:视频、问答 }, viewer:{ id:"ae4dec",// 观看者id groupId:"1",//观看者分组id name:"名称" //观看者名称 }, live:{ liveDuration:1223,//直播持续时长(直播未开始该值为0) liveStartTime:"12:00"//直播开始时间(直播未开始该值为0) } }xxxxxxxxxxDWLive.onPublicChatMessage: //该返回参数有两种类型 //类型1 ,当该消息被敏感词过滤后,这条消息只会被自己收到,返回的数据参数格式为: { "isFilterChat":1, //该条消息为敏感词,已被过滤 "userid": "1bbd4c0ca2694cb7acabf1857198463d", // 发送者id "username": "111", // 发送者名字 "userrole": "student", // 发送者身份 "useravatar": "", // 发送者头像 "usercustommark": "",// 聊天自定义参数 "groupId": "1111", // 分组id "msg": "321321", // 消息内容 "time": "10:16:50" // 发送时间 } //类型2,当该条消息为正常消息时,返回的数据参数格式为: { "chatId":'23213',//聊天id "status":"1",//聊天消息状态, 0为显示 1为不显示 "userid": "1bbd4c0ca2694cb7acabf1857198463d", // 发送者idid "username": "111", // 发送者名字 "userrole": "student", // 发送者身份 "useravatar": "", // 发送者头像 "usercustommark": "",// 聊天自定义参数 "groupId": "1111", // 分组id "msg": "321321", // 消息内容 "time": "10:16:50" // 发送时间 }xxxxxxxxxxDWLive.onPublicChatLogManage:{ "status": "0", // 聊天消息的状态 0 显示 1 不不显示 "chatIds": [ // 聊天消息的id列表 "11111", "22222", "33333" ]}xxxxxxxxxxDWLive.onPrivateChatMessage:{ "fromuserid":"7a4715874d504b8db78cb5b77d66b8c8", // 发送者id "fromusername":"name", // 发送者名字 "touserid":"33ed40d2d7b746919219789733b5bdd4", // 接收者id "tousername":"第三方士大夫", // 接收者名字 "msg":"发反反复复", // 消息内容 "time":"17:22:15" // 发送时间}xxxxxxxxxxDWLive.onQuestion:{ "action":"question", // 提问 "time":-1, "value": { "userId":"C783F0F7CB77E1F3", // 提问者id "userName":"name", // 提问者名字 "content":"123145", // 提问内容 "userAvatar":"img", // 提问者头像 "groupId":"111", //分组信息 "id":"1B5BBA4826FFE337" // 问题id }}xxxxxxxxxxDWLive.onAnswer:{ "action":"answer", // 回答 "time":-1, "value": { "content":"ghghjgug", // 回答内容 "isPrivate":0, // 是否仅提问者可见 "questionId":"1B5BBA4826FFE337", // 问题id "questionUserId":"C783F0F7CB77E1F3", // 提问者id "userId":"ebadb3d414c3471786d095c93bab8cb5", // 回答者id "userName":"www", // 回答者名字 "userAvatar":"img", // 回答者头像 "groupId":"111", //分组信息 "userRole":"publisher" // 回答者身份 }}xxxxxxxxxxDWLive.onPrivateAnswer:{ "fromuserid":"33ed40d2d7b746919219789733b5bdd4", // 发送者id "fromusername":"第三方士夫", // 发送者名字 "fromuserrole":"student", // 发送者身份 "touserid":"7a4715874d504b8db78cb5b77d66b8c8", // 接收者id "tousername":"name", // 接收者名字 "msg":"阿斯蒂芬", // 消息内容 "time":"17:26:24" // 发送时间}xxxxxxxxxxDWLive.submitQuestionnaire(data,callBack)data 请求参数格式{ questionnaireId:"0FF0486DAB9938FB",//问卷ID subjectsAnswer:[ { selectedOptionId:"A63DA4D314D96DFB", //提交答案的ID(单选题) subjectId:"45AC816D86E6AAC3" //提交问题的ID }, { selectedOptionIds:"98809D2B35693987,5F862A1577662D15",//多个答案的ID(多选题) subjectId:"68E9B354A52ABF40" }, { answerContent:"我是问答题的答案", //问答题答案 (问答题) subjectId:"F5EF68012BEF40BE" } ]}xxxxxxxxxxDWLive.getPracticeInfomation(pid,callback)参数:pid --->随堂测id(没有随堂测则可以不传) callback ---->回调参数回调函数返回参数: 无随堂测: { datas: {},//返回数据 errorCode: 426,//错误码 msg: "practice not exists,check params",//错误信息 success: false //是否成功 } 有随堂测: { datas: { isExist: 1, practice:{ id: "F1EE56C62300B088" , //随堂测id isAnswered: "false" , //是否已经回答 options: [ //选项(选项index和选项id) {index: 0, id: "9F10F2FF461AD740"}, {index: 1, id: "8F9FA1BE0AC52C5C"}, … ] publishTime: "2019-11-22 14:08:44", //发布时间 status: 1, //随堂测状态 1 是正在发布 2 结束答题进入统计 type: 1 //随堂测类型 1单选题,2是多选 0 判断题 } }, errorCode: 0, msg: "操作成功", success: true }xxxxxxxxxxDWLive.submitPracticeInfo(pId,opt,callback)参数: pId---->随堂测id opt----->选项信息 callback---->成功或失败回调回调函数返回参数:{ datas: { practice: { answerResult: 1 //选项结果 1为正确 0为错误 id: "9F9D0EC468390E22" isRepeatAnswered: "false", //是否重复回答 options: [ { index: 0,//索引 id: "2715AA75469DCD54", //选项id isCorrect: 0, //该选项是否正确 0为错误 1为正确 count: 0, //选择该选项人数 percent: "0%"//选择该选项的比例 }, ], submitRecord: [{ optionId: "754251300D86E12B",//选择选项的id optionIndex: 1 //选择选项的索引 }], type: 1 //选择题类型 } errorCode: 0 msg: "操作成功" success: true}xxxxxxxxxxDWLive.onHdLiveStartPunch:data:{ "punchId":"5de0c0d36fd538473af20740",//打卡id "expireTime":"2019-11-29 14:55:25",//打卡开始时间 "remainDuration":9, //打开持续时长 "tips":"提示语", //没有设置提示语则不返回该字段}xxxxxxxxxxDWLive.onPageChange:{ "docId": "xxxx",//当前页id "docName": "Java.pdf",//当前页name "docTotalPage": 105,//总页数 "pageNum": 0 //当前页索引值}xDWLive.onBroadcastMsg:{ content: "大家好",//广播内容 time: 205 //广播时间}callBack 回调参数格式如下:xxxxxxxxxxDWLive.getDocs(roomId,userId,callback) callback回调成功后返回信息格式如下: { "msg": "操作成功", //返回请求结果提示信息 "success": true, //请求是否成功 "datas": { "docs": [{ "mode": 0,//当前文档模式 "docName": "water_2017111414005847726.jpg", //文档标题 "docId": "B21F4FC05EA64D489C33DC5901307461", //文档id "docTotalPage": 1, //当前文档总页数 "iconSrc": "http://image.csslcloud.net/image/5CE336670ED3B3179C33DC5901307461/B21F4FC05EA64D489C33DC5901307461/0.jpg",//当前文档的缩略图 "pages": [{ "title": "", //文档页的标题DWLive "pageIndex": 0, //文档页的索引 "src": "http://image.csslcloud.net/image/5CE336670ED3B3179C33DC5901307461/B21F4FC05EA64D489C33DC5901307461/0.jpg" //文档页的资源路径 }] }, { "mode": 0, "docName": "高等数学(一)——初中知识回顾.pdf", "docId": "4A82652F23F93D4A9C33DC5901307461", "docTotalPage": 5, "iconSrc": "http://image.csslcloud.net/image/5CE336670ED3B3179C33DC5901307461/4A82652F23F93D4A9C33DC5901307461/0.jpg", "pages": [{ "title": "", "pageIndex": 0, "src": "http://image.csslcloud.net/image/5CE336670ED3B3179C33DC5901307461/4A82652F23F93D4A9C33DC5901307461/0.jpg" }, { "title": "", "pageIndex": 1, "src": "http://image.csslcloud.net/image/5CE336670ED3B3179C33DC5901307461/4A82652F23F93D4A9C33DC5901307461/1.jpg" }, { "title": "", "pageIndex": 2, "src": "http://image.csslcloud.net/image/5CE336670ED3B3179C33DC5901307461/4A82652F23F93D4A9C33DC5901307461/2.jpg" }, { "title": "", "pageIndex": 3, "src": "http://image.csslcloud.net/image/5CE336670ED3B3179C33DC5901307461/4A82652F23F93D4A9C33DC5901307461/3.jpg" }, { "title": "", "pageIndex": 4, "src": "http://image.csslcloud.net/image/5CE336670ED3B3179C33DC5901307461/4A82652F23F93D4A9C33DC5901307461/4.jpg" }] }] }}callback请求失败回调如下:{errorCode:1,msg:'request was aborted'}xxxxxxxxxxDWLive.onSwitchSource(data)返回参数data:{source_type:0}注:该功能仅限文档直播间使用,主播客户端需使用4.9.0以上版本;返回值说明:source_type:0 数据源未知,在直播未开始、非文档直播间或使用低版本客户端直播时会返回;source_type:10 主播将数据源切换为摄像头模式,摄像头为开启状态;source_type:11 主播将数据源切换为摄像头模式,摄像头为关闭状态;source_type:20 主播将数据源切换为图片模式;source_type:30 主播将数据源切换为插播视频;source_type:40 主播将数据源切换为区域捕获;source_type:50 主播将数据源切换为桌面共享;source_type:60 主播将数据源切换为可自定义场景;xxxxxxxxxxDWLive.onKickOut = function(data){ console.log(data); }data.kick_out_type = 10,在允许重复登录前提下,后进入者会登录会踢出先前登录者.data.kick_out_type = 20,讲师、助教、主持人通过页面踢出按钮踢出用户.参数格式: {"viewerid":"f3793f93a3814bf8937f5dc65521721d","kick_out_type":"10"} 触发条件 1. 讲师/助教/主持人 主动踢出用户,触发该事件2. 在允许重复登录的前提下,后进入者会自动踢出先前登录者,触发该事件。xxxxxxxxxxDWLive.HDUserRemindWithAction:{ "userId":"2f2645fa08054cd2b9bc110260e43dbe", //用户ID "userName":"过来我家", //用户昵称 "userRole":"student", //用户角色 "groupId":"123", //分组ID "clientType":[1,4,2,3], //接收端 1-讲师;2-助教;3-主持人;4-观看端 "prefixContent":"天类鲁鲁饿", //内容前缀 "suffixContent":"妙蛙啊啊啊", //内容后缀 "remindAction": 1 // 1:进 0:出}xxxxxxxxxxDWLive.HDBanChatBroadcastWithData:{ "userId":"2f2645fa08054cd2b9bc110260e43dbe", //用户ID "userName":"过来我家", //用户昵称 "userRole":"student", //用户角色 "groupId":"123", //分组ID "userAvatar":"123.jpg" //头像}xxxxxxxxxxuserRole和fromuserrole对应关系表示如下:unknow: 未知角色;publisher: 主讲;teacher: 助教;host: 主持人;student: 学员(观众);
xxxxxxxxxx<script type="text/javascript">$(function(){// 开始直播DWLive.onLiveStart = function(j){console.log(j);}// 停止直播DWLive.onLiveEnd = function(j){console.log(j);}// 在线人数DWLive.onUserCountMessage = function(j){console.log(j);}// 开始直播后显示公告DWLive.onAnnouncementShow = function (j) {console.log(j);};// 修改公告,发布公告DWLive.onAnnouncementRelease = function (j) {console.log(j);};// 删除公告DWLive.onAnnouncementRemove = function (j) {console.log(j);};// 接收公聊DWLive.onPublicChatMessage = function(j){console.log(j);DWLive.barrage(j,'0xff0000'); // 发送弹幕}// 接收私聊DWLive.onPrivateChatMessage = function(j){console.log(j);}// 接收私聊回复DWLive.onPrivateAnswer = function(j){console.log(j);}// 提问DWLive.onQuestion = function(j){console.log(j);}// 接收回答DWLive.onAnswer = function(j){console.log(j);}// 直播间布局配置DWLive.onRoomSetting = function (data) {var t = data.layout_video_main;if (t === 'true') {Ui.toggleVideo(true);} else {Ui.toggleVideo(false);}};// 通知DWLive.onInformation = function(j){ // 禁言console.log(j);}// 用户禁言后群发消息DWLive.HDBanChatBroadcastWithData = function(data) {console.log("用户禁言后群发消息", data);};// 用户进出提示语DWLive.HDUserRemindWithAction = function(data) {if (e.remindAction === 1) {console.log("进入直播间", data);} else if (e.remindAction === 0) {console.log("退出直播间", data);}};$(".btnsend").click(function(){var msg = $(".chatinput").val();DWLive.sendPublicChatMsg(msg); // 发送公聊})$(".qasend").click(function(){var msg = $(".qainput").val();DWLive.sendQuestionMsg(msg); // 发送问题})$(".setsound").click(function(){DWLive.setSound(0.5); // 设置音量(0-1)})})</script>
响应事件返回的默认都为字符串格式,请自行按需求转化为JSON对象。
xxxxxxxxxxfunction showEm(str) {if (!$.trim(str)) {return '';}str = str.replace(/\</g, '<');str = str.replace(/\>/g, '>');str = str.replace(/\n/g, '<br/>');str = str.replace(/\[em_([0-9]*)\]/g, '<img src="//view.csslcloud.net/img/em/$1.gif" border="0" />');str = str.replace(/\[em2_([0-9]*)\]/g, '<img src="//view.csslcloud.net/img/em2/$1.png" border="0" />');var nmsg = ''; //解析表情$.each(str.split(' '), function (i, n) {n = $.trim(n);if (n.indexOf('[uri_') == 0 && n.indexOf(']') == n.length - 1 && n.length > 6) {var u = n.substring(5, n.length - 1) + ' ';nmsg += '<a target="_blank" style="color: #2f53ff" href="' + u + '">' + u + '</a>' + ' ';} else {nmsg += n + ' ';}});var nmsg = ''; //解析图片var reg = new RegExp(/\[img_http(s)?:\/\/(.*?)\]/g);var isImage =reg.test(str)if(isImage){var sIndex = str.indexOf('_') + 1;nmsg = str.slice(sIndex,str.length-1);var imgTag = '<div class="chatImage" style="width: 100%" ><img src="'+nmsg+'" style="width: 100%;cursor:pointer;" onclick="showMsgImage(event)"/></div>';return imgTag;}return nmsg;}
需要发送图片时,格式如下:[img_http://www.xxx.com]
需要发送带链接的a标签时,格式如下:[uri_http://www.xxx.com] (注意:前后都需要加空格)
在收发消息的时候,用showEm('消息内容')处理一下消息内容即可,原理就是匹配[img_url]和[em2_*],让它变为对应的图片或者表情图片,匹配[uri _ *],让它变为可点击的a链接。
回放SDK依赖于 jQuery,请自行引入 jQuery 库,版本没有要求。
页面引入 jQuery:
xxxxxxxxxx<script src="//view.csslcloud.net/js/jquery-1.9.0.min.js" type="text/javascript"></script>
页面引入 JS SDK:
xxxxxxxxxx<script src="//view.csslcloud.net/js/sdk/3.6.0/playbackSDK.js" type="text/javascript"></script>
视频模块:
xxxxxxxxxx<div id="playbackPlayer"></div>
文档模块:
xxxxxxxxxx<div id="playbackPanel"></div>
初始化:
xxxxxxxxxx<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文档加载 |
| API | 说明 |
| on_cc_live_chat_msg | 显示全部聊天信息 |
| on_cc_live_chat_msg_sync | 同步显示聊天信息 |
| on_cc_live_broadcast_msg | 显示全部广播信息 |
| on_cc_live_broadcast_msg_sync | 同步显示广播信息 |
| on_cc_live_qa_question | 显示提问信息 |
| on_cc_live_qa_answer | 显示回答信息 |
| on_cc_callback_pages | 返回文档信息对象 |
| on_cc_callback_pagechange | 翻页信息回调 |
| on_cc_login_error | 登录失败回调 |
| on_cc_live_player_load | 播放器加载完成,仅支持pc端 |
| on_player_start | 播放开始,仅支持pc端 |
| on_spark_player_pause | 播放暂停,仅支持pc端 |
| on_spark_player_resume | 恢复播放,仅支持pc端 |
| on_spark_player_end | 播放停止,仅支持pc端 |
| on_hdReplay_practice_info | 随堂测请求成功后回调 |
xxxxxxxxxxon_cc_login_success:{ template:{ desc:"视频", //模板描述信息 name:"模板一",//模板名称 type:"1" //模板类型 (1:大屏模式 ,2:问答、视频、聊天 ,3:视频、聊天,4:文档、视频。聊天,5:视频、文档、问答、聊天,6:视频、问答 }, viewer:{ id:"ae4dec",// 观看者id groupId:"1",// 观看者分组id name:"名称" // 观看者名称 }}on_cc_live_chat_msg:{ "chatId":"23981", //聊天消息id "status":"1", //聊天消息状态 0:显示 1:不显示 "userid": "7f3a0c7c496a4a2b86d8e51e358193fd",//发送聊天消息的用户ID "username": "老张",//发送聊天消息的用户名称 "time": 20,//发送时间 "msg": "Hello World.",//聊天内容 "useravatar": "http://www.bokecc.com/static/cms/image/cc-video/navlogo-big.png", //发送者头像 "userRole": "student",//发送者角色,student:学生,teacher:助教,publisher:讲师 "groupId":"111", //分组信息 "usercustommark": "" //用户自定义参数}on_cc_live_broadcast_msg:{ content: "大家好",//广播内容 time: 205 //广播时间}on_cc_live_qa_question:{ "action": "question", "value": { "id": "49CE0XF718D5AA52",//问题ID "content": "我从哪里来?",//问题内容 "userId": "92aa0c1965d842ec9b443270f5734124",//提问者ID "userName": "T",//提问者名称 "groupId":"111", //分组信息 "userAvatar": "http://www.bokecc.com/static/cms/image/cc-video/navlogo-big.png",//提问者头像 "isPublish": 1//该问题是否已发布,1:已发布,0:未发布", }}on_cc_live_qa_answer:{ "action": "answer", "value": { "questionId": "49CE0XF718D5AA52", //问题ID "content": "石头里",//回答内容 "isPrivate": 1,//是否是私密回答,1:私密回答,0:公共回答 "userId": "71120e4cc905425f8da91945c7df2df6",//回答者用户ID "userName": "孙悟空",//回答者名称 "groupId":"111", //分组信息 "userAvatar": "",//回答者头像 "userRole": "回答者角色,teacher:助教,publisher:讲师"//回答者角色 }}on_cc_callback_pages:{ "time": 11, // 图片时间 "url": "http://image.csslcloud.net/image/3CD4C4DF4DF8E0CB9C33DC5901307461/73D088D5AC02E6B1/0.jpg", // 图片地址 "docId": "73D088D5AC02E6B1", // 文档id "docName": "英语.pptx", // 文档名称 "docNotes": "第一页有多个,这是第一个。"// 文档备注(需PPT中有备注信息,若无则没有该字段) "docTotalPage": 11, // 文档总页数 "pageNum": 0, // 当前页码 "encryptDocId": "73D088D5AC02E6B1", // 加密id "useSDK": false}on_cc_callback_pagechange:{ "docId": "xxxx",//当前页id "docName": "Java.pdf",//当前页name "docTotalPage": 105,//总页数 "pageNum": 0 //当前页索引值}on_hdReplay_practice_info:{ success:true,//是否成功 msg:"数据获取成功",//消息 errorCode:0,//错误码 0 表示正常 datas:{ practiceInfo:[ { statistic:{ //统计数据 id:"754251300D86E12B",//统计随堂测id type:1,//随堂测类型(判断:0,单选:1,多选:2) status:1,//状态值 answerPersonNum:100,//回答人数 correctPersonNum:10,//回答正确人数 correctRate:"10%",//正确率 options:[ { index:0, id:"2715AA75469DCD54",//选项id isCorrect:1,//是否正确选项(1:是 0:否) count:5,//此选项选择人数 percent:"5%"//此选项选择人数百分比 } ]//选项 }, rank:{//排名 id:"754251300D86E12B",//随堂测id ranking:[ { viewerId:"29312",//观看者id viewerName:"abc",//观看者名称 costTime:"22"//耗时 } ] }, base:{//基础信息 id:"754251300D86E12B",//随堂测id type:1,//随堂测类型(判断:0,单选:1,多选:2) status:1,//状态(正在发布:1 已停止:2) publishTime:"2019-11-22 14:08:44",//发布时间 recordId:"D2BBC2DeA",//回放id recordTime:20,//相对于回放开始时长 stopRecordTime:30,//相对于回放开始停止时长 closeRecordTime:40,//相对于回放开始关闭时长 options:[//选项 { index:0,// id:"2715AA75469DCD54",//选项id isCorrect:1//是否正确(1:正确0:错误) } ] } } ] }}userRole和answerUserRole对应关系表示如下: unknow: 未知角色; publisher: 主讲; teacher: 助教; host: 主持人; student: 学员(观众);xxxxxxxxxx<script type="text/javascript">$.DW.seek(time); // 跳转到指定时间播放,time单位为秒</script>
xxxxxxxxxx<script type="text/javascript">$.DW.getPlayerTime(); // 获取当前播放时间</script>
xxxxxxxxxx<script type="text/javascript">window.on_cc_live_player_load = function () { // 播放器加载完毕console.log($.DW.getDuration()); // 获取视频总时长};</script>
xxxxxxxxxx$.DW.docAdapt(true); // true为打开自适应,false为关闭,默认为关闭,仅支持PC端
xxxxxxxxxxvar marquee;$.DW.getMarquee = function(data) {if (!!data) {marquee = data;return;}marquee = $("#viewerMarquee").text();};window.on_cc_swf_loading_completed = function() { //需要播放器加载完毕再执行setTimeout(function() {var marqueeInfo = $.trim(marquee);$.DW.showMarqueeDoc(marquee);}, 1000);};
| API | 说明 |
| $.DW.isShowBar(0) | 隐藏视频播放控制条,0为打开,1为隐藏,默认为打开 |
| $.DW.switchFullScreen(true/false) | 回放视频全屏(H5播放器) |
| $.DW.getBuffer() | 获取buffer |
| $.DW.setVolume() | 设置音量,0-1 |
| $.DW.getVolume() | 获取音量 |
| $.DW.play() | 播放暂停 |
| $.DW.setZScale() | 缩放视频画面,number(0-1),仅支持Flash播放器 |
| $.DW.getZScale() | 获取视频画面缩放比例,仅支持Flash播放器 |
| $.DW.setScale() | 设置视频窗口比例("full", "scale43", "scale169", "original"),仅支持Flash播放器 |
| $.DW.getScale() | 获取视频窗口比例,仅支持Flash播放器 |
| $.DW.openSettingPanel() | 打开设置面板,仅支持Flash播放器 |
| $.DW.playbackRate() | 倍速播放,默认1.0 正常速度,倍速设置范围0.5~2倍速,仅支持H5播放器 |
| $.DW.getReplayPractice() | 获取随堂测信息 |
| $.DW.destroy() | 销毁 |
| $.DW.clipVideoImage() | 截取视频图像 说明: 该方法会截取视频图像, 并且返回base64的视频图像的内容(目前只支持h5播放器) |
| API | 说明 |
| $.DW.showMarqueeDoc(marquee) | 文档显示跑马灯,仅支持PC端 |
下载地址:https://dl.csslcloud.net/live/sdk/web/Live_Web_Play_SDK-3.6.0.zip
| 更新日期 | 版本号 | 更新内容 |
|---|---|---|
| 2021-01-15 | 3.6.0 | 新增直播H5播放器视频全屏方法 新增回放H5播放器视频全屏方法 回放H5播放器支持点播加密增强视频 优化直播H5播放器失去焦点3秒隐藏控制条 修复踢出事件在移动端不生效问题 修复直播H5播放器 Safari 卡顿问题 修复回放sdk 移动端初始化完成后,首次触发play方法无法播放问题 |
| 2020-11-30 | 3.5.2 | 优化直播H5播放器,修复播放状态异常问题; 优化文档模块加载机制,提高SDK升级兼容性; 修复历史问答无法获取提问用户头像问题; |
| 2020-11-05 | 3.5.1 | 修复直播、回放文档iframe不在playbackPanel内部问题 |
| 2020-10-29 | 3.5.0 | PC端直播H5播放器新增以下功能: -支持弹幕功能 -支持跑马灯功能 -支持暖场视频功能 -支持播放器背景图 -支持播放器提示语 -支持播放器倒计时 -支持双击全屏显示 -播放器英文版适配 -播放器相关按钮样式优化 |
| 2020-09-04 | 3.4.0 | 直播SDK支持自定义打卡提示语 直播SDK新增用户进出直播间消息通知 直播SDK新增用户禁言群发消息通知 |
| 2020-08-21 | 3.3.0 | 新增PC端回放文档模块显示跑马灯 新增直播支持广播历史记录删除 回放增加获取文档备注字段docNotes 修复回放PC端H5播放器获取buffer不准确问题 修复回放文档iframe不在playbackPanel内部问题 |
| 2020-04-22 | 3.2.2 | 新增禁言并删除聊天记录方法 直播回放新增课件水印支持 完善SDK使用说明文档 修复H5直播播放器bug |
| 2020-04-14 | 3.2.1 | 修复回放拖动播放文档偶尔不显示问题; |
| 2020-02-26 | 3.2.0 | 新增截图功能 直播支持h5播放器 文档优化 |
| 2019-12-10 | 3.1.0 | 新增随堂测功能 新增打卡功能 新增销毁方法 优化SDK使用文档 |
| 2019-10-15 | 3.0.0 | 新增版本控制,取消SDK热更新机制 文档默认使用极速模式 回放默认使用H5播放器 回放初始化取消liveId的兼容,必须传入recordId 升级连麦模块,支持新版连麦 优化回放文档画笔数据加载 |
| 2019-06-25 | 2.9.1 | 新增webpack版demo |
| 2019-01-21 | 2.9.0 | 新增登录成功回调 支持敏感词过滤 支持聊天审核 支持直播分组 文档极速动画模式兼容docAdapt方法 |
| 2019-01-09 | 2.8.1 | 直播socket链接状态回调 新增聊天图片解析说明 |
| 2018-12-11 | 2.8.0 | 直播新增视频、文档为主布局切换回调 新增用户禁言后聊天回调 退出登录增加状态回调 |
| 2018-11-07 | 2.7.0 | 文档模式新增切换数据源响应事件 新增学员踢出类型 |
| 2018-10-15 | 2.6.0 | 直播新增问卷提交方法和问卷统计回调 直播新增获取直播间文档方法 直播新增自由翻页模式 |
| 2018-09-12 | 2.5.0 | 直播和回放文档支持极速动画模式 直播新增onLiveTime回调,返回直播开始时间和直播时长 优化demo |
| 2018-07-04 | 2.4.1 | 直播新增viewercustominfo参数 回放PC端新增H5播放器及倍速播放 回放demo界面美化 |
| 2018-06-13 | 2.4.0 | 直播和回放新增翻页信息回调 直播支持观看直播时修改昵称 直播支持广播信息补推(最后一条广播) 回放增加直播中发布的广播信息的回调 |
| 2018-03-28 | 2.3.1 | 新增直播中获取问卷的方法 |
| 2018-02-27 | 2.3.0 | 支持第三方问卷 支持直播倒计时 支持文档显示模式 优化低延迟模式下文档视频同步性 回放Flash播放器API增加播放回调事件、面板设置、画面缩放、画面比例 |
| 2017-11-28 | 2.2.0 | 支持聊天记录补推 增加获取播放器背景图及提示语的方法 支持橡皮擦删除画笔 增加聊天自定义参数支持 回放Flash播放器API增加隐藏控制条、音量控制、播放控制、获取buffer |
| 2017-10-10 | 2.1.0 | 新增用户退出功能 新增问卷功能 新增广播消息 新增web端布局切换事件 新增聊天获取讲师列表私聊 新增PC端直播中的状态事件 新增获取直播间简介 新增是否显示在线人数 新增跑马灯功能,并支持设置显示在文档还是视频Flash上 直播和回放新增增加自定义ua参数 viewercustomua 直播和回放新增flash播放器加载完成事件 回放登录参数 liveId 修改为recordId |
| 2017-07-26 | 2.0.0 | 移动端支持画笔显示 PC和移动端支持ppt动画 PC端增加文档自适应窗口方法 移动端回放支持ppt同步翻页 移动端直播增加文档延迟保持和直播同步 回放增加登录失败回调方法 |
| 2017-06-28 | 1.8.4 | 支持连麦功能 回放支持获取时长 |
| 2017-01-18 | 1.8.3 | 支持https |
| 2016-11-22 | 1.8.2 | 新增回放聊天同步显示接口 |
| 2016-11-18 | 1.8.1 | 新增弹幕开关 新增控制条隐藏 新增文档弹幕 直播聊天和问答返回角色信息 回放聊天和问答返回角色、头像信息 |
| 2016-11-08 | 1.8.0 | 新增签到 新增抽奖 新增答题卡 新增聊天中超链接发送说明 回放新增获取文档图片信息 回放新增获取当前播放时间 |