`;
document.body.appendChild(panel);
// 事件绑定
const dropZone = document.getElementById('vc-drop-zone');
const fileInput = document.getElementById('vc-file-input');
dropZone.addEventListener('click', () => fileInput.click());
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('dragover');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('dragover');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('dragover');
const files = e.dataTransfer.files;
if (files.length > 0 && files[0].type.startsWith('video/')) {
handleFileSelect(files[0]);
}
});
fileInput.addEventListener('change', (e) => {
if (e.target.files.length > 0) {
handleFileSelect(e.target.files[0]);
}
});
document.getElementById('vc-compress-btn').addEventListener('click', startCompress);
}
function togglePanel() {
const panel = document.getElementById('vc-panel');
panel.classList.toggle('show');
}
let selectedFile = null;
function handleFileSelect(file) {
selectedFile = file;
const fileInfo = document.getElementById('vc-file-info');
const fileName = document.getElementById('vc-file-name');
const fileSize = document.getElementById('vc-file-size');
const compressBtn = document.getElementById('vc-compress-btn');
fileName.textContent = file.name;
fileSize.textContent = formatFileSize(file.size);
fileInfo.classList.add('show');
compressBtn.disabled = !ffmpegLoaded;
// 清除之前的结果
hideStatus();
}
function formatFileSize(bytes) {
if (bytes < 1024) return bytes + ' B';
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
}
// ==================== FFmpeg 加载 ====================
async function loadFFmpeg() {
const statusEl = document.getElementById('vc-ffmpeg-status');
const btn = document.getElementById('vc-compress-btn');
if (statusEl) {
statusEl.textContent = '正在加载视频处理引擎...';
statusEl.classList.add('loading');
}
try {
// 动态加载 ffmpeg.wasm
const { FFmpeg } = await import('https://cdn.jsdelivr.net/npm/@ffmpeg/ffmpeg@0.12.7/+esm');
const { fetchFile } = await import('https://cdn.jsdelivr.net/npm/@ffmpeg/util@0.12.1/+esm');
ffmpeg = new FFmpeg();
ffmpeg.on('progress', ({ progress }) => {
const fill = document.getElementById('vc-progress-fill');
const text = document.getElementById('vc-progress-text');
if (fill) fill.style.width = Math.round(progress * 100) + '%';
if (text) text.textContent = `处理中: ${Math.round(progress * 100)}%`;
});
ffmpeg.on('log', ({ message }) => {
console.log('[FFmpeg]', message);
});
await ffmpeg.load({
coreURL: 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.6/dist/esm/ffmpeg-core.js',
wasmURL: 'https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.6/dist/esm/ffmpeg-core.wasm'
});
ffmpegLoaded = true;
if (statusEl) {
statusEl.textContent = '✓ 引擎加载完成，可以开始压缩';
statusEl.classList.remove('loading');
statusEl.style.color = '#4caf50';
}
if (btn && selectedFile) btn.disabled = false;
} catch (error) {
console.error('FFmpeg load error:', error);
if (statusEl) {
statusEl.textContent = '引擎加载失败，请刷新页面重试';
statusEl.classList.remove('loading');
}
}
}
// ==================== 视频压缩 ====================
async function startCompress() {
if (!selectedFile || !ffmpegLoaded || isCompressing) return;
isCompressing = true;
const btn = document.getElementById('vc-compress-btn');
const progress = document.getElementById('vc-progress');
const fill = document.getElementById('vc-progress-fill');
const text = document.getElementById('vc-progress-text');
const status = document.getElementById('vc-status');
const statusText = document.getElementById('vc-ffmpeg-status');
btn.disabled = true;
btn.textContent = '压缩中...';
progress.classList.add('show');
fill.style.width = '0%';
text.textContent = '读取文件...';
hideStatus();
if (statusText) {
statusText.textContent = '';
statusText.classList.remove('loading');
}
try {
const { fetchFile } = await import('https://cdn.jsdelivr.net/npm/@ffmpeg/util@0.12.1/+esm');
// 写入输入文件
text.textContent = '读取视频文件...';
const inputName = 'input' + getExtension(selectedFile.name);
await ffmpeg.writeFile(inputName, await fetchFile(selectedFile));
// 构建 ffmpeg 命令
const format = document.getElementById('vc-format').value;
const preset = document.getElementById('vc-preset').value;
const crf = document.getElementById('vc-crf').value;
const removeAudio = document.getElementById('vc-remove-audio').checked;
const outputName = 'output.' + format;
const args = ['-i', inputName];
// 视频编码设置
if (format === 'mp4') {
args.push('-c:v', 'libx264', '-preset', preset, '-crf', crf);
} else if (format === 'webm') {
args.push('-c:v', 'libvpx-vp9', '-crf', crf, '-b:v', '0');
} else if (format === 'mkv') {
args.push('-c:v', 'libx264', '-preset', preset, '-crf', crf);
}
// 音频设置
if (removeAudio) {
args.push('-an');
} else {
if (format === 'mp4') {
args.push('-c:a', 'aac', '-b:a', '128k');
} else {
args.push('-c:a', 'libopus', '-b:a', '128k');
}
}
args.push('-y', outputName);
text.textContent = '正在压缩视频...';
await ffmpeg.exec(args);
// 读取输出文件
text.textContent = '生成压缩文件...';
const data = await ffmpeg.readFile(outputName);
const blob = new Blob([data.buffer], { type: getMimeType(format) });
const url = URL.createObjectURL(blob);
const originalSize = selectedFile.size;
const compressedSize = blob.size;
const ratio = ((1 - compressedSize / originalSize) * 100).toFixed(1);
// 显示成功状态
status.className = 'vc-status show success';
status.innerHTML = `