[TOC]
1音视频插件使用指南
插播音视频插件用于播放通过云课堂admin关联的音视频文件
1.1文件引用
// 引入video.css
<link href="../js/videosdk/video/video.css" rel="stylesheet" />
// 引入js文件
<!--引入小班课基础音视频sdk 4.0 版本 -->
<script src="https://class.csslcloud.net/static/dist/js/websdk_4.0.js"></script>
<!--引入jquery类库,插播音视频依赖jquery库-->
<script src="https://class.csslcloud.net/static/js/jquery/jquery.min.js"></script>
<!--依赖videoJs audioJs-->
<script src="../js/videosdk/video/video.js"></script>
<script src="../js/videosdk/audio/audio.js"></script>
<!--引入插播音视频sdk-->
<script src="../js/videosdk/sdk/insetVideo.js"></script>
1.2 初始化
rtc.insertVideoInit({
adminRole: 1, // 1: 管理者角色即播放发起者角色 0:学生角色,从动角色
mediaData: data // data为登陆成功后返回的数据中data.media
});
// mediaData 需要在登陆成功后获取
// 使用例子
rtc.on('login_success', function (data) {
// 登录成功后获取初始化数据
console.log(data.media);
rtc.insertVideoInit({
adminRole: 1, // 1: 管理者角色即播放发起者角色 0:学生角色,从动教师角色
mediaData: data.media // data为登陆成功后返回的数据中data.media
});
});
1.3 上传音视频
//上传音视频文件 file 为音视频文件对象
rtc.initCCh5Upload({
file: file
});
2 获取房间关联音视频列表
此方法用于获取房间内所关联的音视频文件
rtc.getVideoList({
success: function(data){
console.log(data)
var videos = data.video;
}
});
返回数据说明:
必要的参数说明
id: "E9599186B21C62DD9C33DC5901307461" //文件id
mediaType: 1 // 1:视频文件 2: 音频文件
status: 0 // 0 可播放状态。 非 0 : 不可播放状态
title: "啦绿啦.mp4" // 文件name
2.1 从关联列表移除单个媒体资源
管理者角色从媒体库中取消关联某个媒体资源文件
rtc.deleteMedia({
vid: '47EE90FF402ABEEC2BBA984E86119800', // 待删除的媒体资源的文件id
success: function(res){
console.log(res)
},
fail: function(err){
console.log(err)
}
})
2.2 播放音视频文件
管理者角色主动发起音视频播放
rtc.playMediaFile({
id: id, // 文件id
mediaType: mediaType, // 文件类型 1 视频文件 2 音频文件
fileName: fileName // 文件名
});
2.3 关闭音视频文件播放
管理者角色主动关闭音视频播放
rtc.closeCurrentVideo({
type: 1, // 1 关闭视频 2 关闭音频
success: function () {
// 删除音视频dom
}
});
2.4 查询单个文件转码状态
rtc.getMediaStatus({
id: id, // 此 id 为文件id
success: function (data) {
if (data.status === 0) {
// 转码成功
} else {
// 转码中
}
},
fail: function (data) {
console.log('失败查询');
}
});
3 监听事件
3.1 监听创建视频dom
管理者、非管理者都需要监听此事件,sdk将视频dom传递出来,由应用层加载到页面中,具体使用参考demo 中用法
rtc.on('creatVideo', function (data) {
// data数据如下
{
type: 1, // 视频
fileName: filename,
domStr: videoDom // 视频dom 字符串
};
});
3.2 监听创建音频dom
管理者、非管理者都需要监听此事件,sdk将音频dom传递出来,由应用层加载到页面中,具体使用参考demo 中用法
rtc.on('creatAudio', function (data) {
// data数据如下
{
type: 2, // 音频
fileName: filename,
domStr: audioDom // 音频dom 字符串
};
});
3.3 学生端监听移除dom事件
讲师端主动发起关闭视频或音频,学生监听到次事件后可以
// 关闭视频
rtc.on('closeVideo', function(){
$('#video-player').remove();
});
// 关闭音频
rtc.on('closeAudio', function(){
$('#audio-player').remove();
});
3.4 监听开始上传
上传开始
rtc.on('uploadStart',function (obj) {
// obj包括{
id: vid,
name: 'cascasc',
'type': 1 / 2
}
});
3.5 监听上传进度
上传时的进度回调
rtc.on('uploadProgress',function (obj) {
// obj包括{
id: vid,
progress: 50
}
});
//当上传百分比为100时,需要轮训查单个转码状态
3.6监听上传失败
上传后失败则会调用该回调
rtc.on('uploadFailded', function (data) {
// data.id
});
4 异常处理
4.1 当音视频不能被浏览器自动播放时,会向应用层发送以下事件
// 注意: 应用层新增domId 一定是autoPlayVideo 、autoPlayAudio,sdk内部针对这两个id注册了点击事件,点击后删除应用层dom尝试再次播放
rtc.on('autoPlayVideo', function(){
$('body').append('<div id ="autoPlayVideo" >允许播放视频</div>');
});
rtc.on('autoPlayAudio', function(){
$('body').append('<div id ="autoPlayAudio">允许播放音频</div>');
});