[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>');
});

results matching ""

    No results matching ""