基本使用

本章将介绍videojs-record的基本使用方法，包括初始化播放器、控制录制过程、处理录制数据等核心操作。

3.1 初始化播放器

在使用videojs-record之前，需要先初始化Video.js播放器并配置record插件：

基本初始化

// 获取视频元素
var videoElement = document.getElementById('myVideo');

// 初始化videojs-record
var player = videojs(videoElement, {
    controls: true,
    width: 600,
    height: 300,
    plugins: {
        record: {
            // 启用音频和视频录制
            audio: true,
            video: true,
            // 设置最大录制时长为300秒
            maxLength: 300
        }
    }
});

3.2 录制控制

videojs-record提供了简单的方法来控制录制过程：

录制控制方法

// 开始录制
player.record().start();

// 暂停录制
player.record().pause();

// 恢复录制
player.record().resume();

// 停止录制
player.record().stop();

// 获取录制状态
var isRecording = player.record().isRecording();
var isPaused = player.record().isPaused();

3.3 事件处理

videojs-record通过事件机制来通知应用程序录制过程中的各种状态变化：

常用事件

// 设备就绪事件
player.on('deviceReady', function() {
    console.log('设备已就绪');
});

// 开始录制事件
player.on('startRecord', function() {
    console.log('开始录制');
});

// 暂停录制事件
player.on('pauseRecord', function() {
    console.log('录制已暂停');
});

// 恢复录制事件
player.on('resumeRecord', function() {
    console.log('录制已恢复');
});

// 停止录制事件
player.on('stopRecord', function() {
    console.log('录制已停止');
});

// 录制完成事件
player.on('finishRecord', function() {
    console.log('录制完成');
    // 获取录制的数据
    var data = player.recordedData;
});

3.4 处理录制数据

录制完成后，可以通过recordedData属性获取录制的数据：

处理录制数据

player.on('finishRecord', function() {
    // 获取录制的数据
    var data = player.recordedData;
    
    // 数据包含以下属性：
    // data.video - 视频blob对象
    // data.audio - 音频blob对象（如果录制了音频）
    // data.thumbnail - 缩略图blob对象（如果启用了缩略图）
    
    console.log('视频数据:', data.video);
    console.log('音频数据:', data.audio);
    
    // 创建视频URL用于播放
    var videoUrl = URL.createObjectURL(data.video);
    console.log('视频URL:', videoUrl);
    
    // 下载录制的视频
    var a = document.createElement('a');
    a.href = videoUrl;
    a.download = 'recorded-video.webm';
    a.click();
});

3.5 销毁播放器

在不需要使用播放器时，应该销毁它以释放资源：

销毁播放器

// 销毁播放器
player.dispose();

提示：在处理录制数据时，记得在适当的时候调用URL.revokeObjectURL()来释放创建的URL对象，以避免内存泄漏。