自定义配置
本章将深入介绍videojs-record的各种配置选项，帮助您根据项目需求进行灵活定制。
8.1 基本配置选项
videojs-record提供了丰富的基本配置选项：
完整配置选项
var player = videojs('myVideo', {
controls: true,
width: 640,
height: 480,
plugins: {
record: {
// 基本录制选项
audio: true, // 启用音频录制
video: true, // 启用视频录制
screen: false, // 启用屏幕录制
// 限制选项
maxLength: 300, // 最大录制时长（秒）
maxFileSize: 104857600, // 最大文件大小（字节，100MB）
// 调试选项
debug: true, // 启用调试模式
// 设备选项
autoMuteDevice: false, // 录制完成后自动静音设备
// 音频配置
audio: {
sampleRate: 44100, // 采样率
channelCount: 2, // 声道数
audioBitRate: 128, // 音频比特率
audioMimeType: 'audio/webm;codecs=opus' // 音频格式
},
// 视频配置
video: {
width: 1280, // 视频宽度
height: 720, // 视频高度
frameRate: 30, // 帧率
videoBitRate: 1500, // 视频比特率
videoMimeType: 'video/webm;codecs=vp9' // 视频格式
},
// 屏幕录制配置
screen: {
width: { min: 640, ideal: 1280, max: 1920 },
height: { min: 480, ideal: 720, max: 1080 },
frameRate: { min: 15, ideal: 30, max: 60 }
}
}
}
});8.2 界面自定义
可以自定义录制界面的外观和行为：
界面配置选项
// 界面自定义配置
var uiConfig = {
plugins: {
record: {
// 显示录制时间
timeSlice: 1000, // 时间切片（毫秒）
// 录制按钮配置
recordButton: {
className: 'custom-record-button', // 自定义CSS类名
text: '录制' // 按钮文本
},
// 暂停按钮配置
pauseButton: {
className: 'custom-pause-button',
text: '暂停'
},
// 停止按钮配置
stopButton: {
className: 'custom-stop-button',
text: '停止'
},
// 重新录制按钮配置
reRecordButton: {
className: 'custom-rerecord-button',
text: '重新录制'
},
// 显示录制时间
displayTime: true,
// 时间格式
timeFormat: 'MM:ss' // 分:秒格式
}
}
};
// 初始化播放器
var player = videojs('myVideo', uiConfig);8.3 样式自定义
通过CSS自定义录制控件的外观：
自定义CSS样式
/* 自定义录制按钮样式 */
.custom-record-button {
background-color: #00758F !important;
border: none !important;
border-radius: 4px !important;
color: white !important;
padding: 8px 16px !important;
font-size: 14px !important;
cursor: pointer !important;
transition: background-color 0.3s ease !important;
}
.custom-record-button:hover {
background-color: #006073 !important;
}
/* 自定义暂停按钮样式 */
.custom-pause-button {
background-color: #ffc107 !important;
border: none !important;
border-radius: 4px !important;
color: #212529 !important;
padding: 8px 16px !important;
font-size: 14px !important;
cursor: pointer !important;
margin-left: 10px !important;
}
/* 自定义停止按钮样式 */
.custom-stop-button {
background-color: #dc3545 !important;
border: none !important;
border-radius: 4px !important;
color: white !important;
padding: 8px 16px !important;
font-size: 14px !important;
cursor: pointer !important;
margin-left: 10px !important;
}
/* 录制时间显示样式 */
.vjs-record-time {
color: #00758F !important;
font-weight: bold !important;
font-size: 16px !important;
}
/* 录制指示器样式 */
.vjs-record-indicator {
width: 12px !important;
height: 12px !important;
background-color: #dc3545 !important;
border-radius: 50% !important;
animation: blink 1s infinite !important;
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0.5; }
100% { opacity: 1; }
}8.4 功能配置
配置录制功能的高级选项：
功能配置选项
// 高级功能配置
var advancedConfig = {
plugins: {
record: {
// 时间切片录制
timeSlice: 1000, // 每秒生成一个数据块
// 实时预览
preview: true, // 启用实时预览
// 缩略图生成
thumbnail: {
width: 320, // 缩略图宽度
height: 240, // 缩略图高度
time: 5 // 在第5秒生成缩略图
},
// 文件命名
fileName: function() {
return 'recording-' + new Date().getTime() + '.webm';
},
// 文件格式
fileTypes: {
video: 'webm',
audio: 'webm',
screen: 'webm'
},
// 编码选项
videoRecorderType: 'auto', // 视频编码器类型
audioRecorderType: 'auto', // 音频编码器类型
// 性能选项
frameWidth: 1280, // 帧宽度
frameHeight: 720, // 帧高度
videoFrameRate: 30, // 视频帧率
// 内存管理
maxMemory: 500 * 1024 * 1024, // 最大内存使用（500MB）
// 错误处理
retryTimes: 3, // 重试次数
retryDelay: 1000 // 重试延迟（毫秒）
}
}
};
// 初始化播放器
var player = videojs('myVideo', advancedConfig);8.5 动态配置
在运行时动态修改配置：
动态配置修改
// 动态修改配置
var player = videojs('myVideo', {
controls: true,
plugins: {
record: {
audio: true,
video: true
}
}
});
// 修改录制配置
function updateRecordingConfig(newConfig) {
// 更新音频配置
if (newConfig.audio) {
player.record().setAudioSettings(newConfig.audio);
}
// 更新视频配置
if (newConfig.video) {
player.record().setVideoSettings(newConfig.video);
}
// 更新最大录制时长
if (newConfig.maxLength) {
player.record().setMaxLength(newConfig.maxLength);
}
// 更新最大文件大小
if (newConfig.maxFileSize) {
player.record().setMaxFileSize(newConfig.maxFileSize);
}
}
// 示例：切换到高清录制模式
function switchToHDMode() {
updateRecordingConfig({
video: {
width: 1920,
height: 1080,
frameRate: 30,
videoBitRate: 5000
},
audio: {
sampleRate: 48000,
audioBitRate: 192
},
maxLength: 600 // 10分钟
});
}
// 示例：切换到省电模式
function switchToPowerSavingMode() {
updateRecordingConfig({
video: {
width: 640,
height: 480,
frameRate: 15,
videoBitRate: 500
},
audio: {
sampleRate: 22050,
audioBitRate: 64
},
maxLength: 300 // 5分钟
});
}
// 监听配置变化
player.on('configurationChange', function(event, config) {
console.log('配置已更新:', config);
});8.6 配置验证
验证配置选项的有效性：
配置验证
// 配置验证函数
function validateRecordConfig(config) {
const errors = [];
// 验证录制选项
if (config.audio === undefined &&
config.video === undefined &&
config.screen === undefined) {
errors.push('至少需要启用一种录制模式（audio/video/screen）');
}
// 验证最大录制时长
if (config.maxLength && config.maxLength <= 0) {
errors.push('最大录制时长必须大于0');
}
// 验证最大文件大小
if (config.maxFileSize && config.maxFileSize <= 0) {
errors.push('最大文件大小必须大于0');
}
// 验证视频配置
if (config.video) {
if (typeof config.video === 'object') {
if (config.video.width && config.video.width <= 0) {
errors.push('视频宽度必须大于0');
}
if (config.video.height && config.video.height <= 0) {
errors.push('视频高度必须大于0');
}
if (config.video.frameRate && config.video.frameRate <= 0) {
errors.push('视频帧率必须大于0');
}
}
}
// 验证音频配置
if (config.audio && typeof config.audio === 'object') {
if (config.audio.sampleRate && config.audio.sampleRate <= 0) {
errors.push('音频采样率必须大于0');
}
if (config.audio.channelCount && config.audio.channelCount <= 0) {
errors.push('音频声道数必须大于0');
}
if (config.audio.audioBitRate && config.audio.audioBitRate <= 0) {
errors.push('音频比特率必须大于0');
}
}
return {
isValid: errors.length === 0,
errors: errors
};
}
// 使用配置验证
function initPlayerWithValidation(config) {
const validation = validateRecordConfig(config.plugins.record);
if (!validation.isValid) {
console.error('配置验证失败:', validation.errors);
return null;
}
try {
const player = videojs('myVideo', config);
console.log('播放器初始化成功');
return player;
} catch (error) {
console.error('播放器初始化失败:', error);
return null;
}
}
// 示例使用
const playerConfig = {
controls: true,
plugins: {
record: {
audio: true,
video: {
width: 1280,
height: 720,
frameRate: 30
},
maxLength: 300
}
}
};
const player = initPlayerWithValidation(playerConfig);提示：在修改配置时，建议先进行验证以确保配置的有效性，避免因配置错误导致录制失败。