在浏览器中将本地视频导出为带声音的 WebM 格式视频，可以通过 JavaScript 使用 MediaRecorder API 实现。大致思路是将本地视频加载到 <video> 标签中，然后使用 captureStream() 获取其视频和音频流，再用 MediaRecorder 录制成 WebM 格式。下面是完整的示例步骤和代码：一、前提条件
浏览器支持 MediaRecorder 和 captureStream()（Chrome、Firefox 支持良好）。本地视频格式可以被浏览器解码（建议使用 mp4）。 二、HTML 结构
<input type="file" id="input" accept="video/*" /> <video id="video" controls style="max-width: 100%;"></video> <button id="recordBtn">导出为 WebM</button>三、JavaScript 实现逻辑
const input = document.getElementById('input');
const video = document.getElementById('video');
const recordBtn = document.getElementById('recordBtn');
let mediaRecorder;
let recordedChunks = [];
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const url = URL.createObjectURL(file);
video.src = url;
}
});
recordBtn.addEventListener('click', async () => {
if (video.readyState < 3) {
alert("请等待视频加载完成！");
return;
}
const stream = video.captureStream(); // 获取音视频流
recordedChunks = [];
mediaRecorder = new MediaRecorder(stream, { mimeType: 'video/webm; codecs=vp8,opus' });
mediaRecorder.ondataavailable = function (event) {
if (event.data.size > 0) recordedChunks.push(event.data);
};
mediaRecorder.onstop = function () {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const downloadUrl = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = downloadUrl;
a.download = 'recorded.webm';
a.click();
};
video.play(); // 播放视频开始录制
mediaRecorder.start();
video.onended = () => {
mediaRecorder.stop();
};
});
四、注意事项audio 也必须通过 captureStream() 获取，不然录制没有声音。有些浏览器会要求用户交互后才能播放音频，确保用户有点击过页面。MediaRecorder 支持的格式因浏览器不同而异（WebM 在 Chrome/Firefox 最稳定）。五、测试推荐浏览器Google Chrome 最新版Firefox 最新版Safari 不支持 MediaRecorder（需要 Polyfill 或后端处理）如果你想导出更高质量或自定义编码参数的视频，可能需要转到后端处理或用 ffmpeg.wasm（但处理速度慢，资源占用高）。
参考代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>导出WebM视频（含声音）</title>
<style>
body { font-family: sans-serif; padding: 20px; }
video { max-width: 100%; margin-top: 10px; }
button { margin-top: 10px; padding: 10px 20px; font-size: 16px; }
</style>
</head>
<body>
<h2>本地视频导出 WebM（含声音）</h2>
<input type="file" id="input" accept="video/*" />
<br />
<video id="video" controls></video>
<br />
<button id="recordBtn">导出为 WebM 视频</button>
<script>
const input = document.getElementById('input');
const video = document.getElementById('video');
const recordBtn = document.getElementById('recordBtn');
let mediaRecorder;
let recordedChunks = [];
input.addEventListener('change', (e) => {
const file = e.target.files[0];
if (file) {
const url = URL.createObjectURL(file);
video.src = url;
video.load();
}
});
recordBtn.addEventListener('click', async () => {
if (video.readyState < 3) {
alert("请等待视频加载完成！");
return;
}
const stream = video.captureStream(); // 获取音视频流
recordedChunks = [];
mediaRecorder = new MediaRecorder(stream, {
mimeType: 'video/webm; codecs=vp8,opus'
});
mediaRecorder.ondataavailable = function (event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
};
mediaRecorder.onstop = function () {
const blob = new Blob(recordedChunks, { type: 'video/webm' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'recorded.webm';
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(url);
};
video.play(); // 播放并开始录制
mediaRecorder.start();
video.onended = () => {
mediaRecorder.stop();
};
});
</script>
</body>
</html>
网友回复
我知道答案，我要回答
私活外包
最新提问
为啥所有的照片分辨率提升工具都会修改照片上的图案细节？
js如何在浏览器中将webm视频的声音分离为单独音频？
微信小程序如何播放第三方域名url的mp4视频？
ai多模态大模型能实时识别视频中的手语为文字吗？
如何远程调试别人的chrome浏览器获取调试信息？
为啥js打开新网页window.open设置窗口宽高无效？
浏览器中js的navigator.mediaDevices.getDisplayMedia屏幕录像无法录制SpeechSynthesisUtterance产生的说话声音？
js中mediaRecorder如何录制window.speechSynthesis声音音频并下载？
python如何直接获取抖音短视频的音频文件url？
js在浏览器中如何使用MediaStream与MediaRecorder实现声音音频多轨道混流？
