在浏览器中将本地视频导出为带声音的 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>
网友回复
我知道答案，我要回答
私活外包
最新提问
threejs如何做个三维搭积木的游戏？
three如何实现标记多个起始路过地点位置后选择旅行工具（飞机汽车高铁等），最后三维模拟行驶动画导出mp4？
ai实时驱动的3d数字人可视频聊天的开源技术有吗
swoole+phpfpm如何实现不同域名指向不同目录的多租户模式？
如何用go替换nginx实现请求phpfpm解析运行php脚本？
有没有浏览器离线运行进行各种文档、图片、视频格式转换的开源工具？
如何使用go语言搭建一个web防火墙？
linux如何检测特定网络协议比如http协议中报文是否包含特点关键词并阻止返回给客户？
如果在nginx外过滤包含某些关键词的网页并阻止打开？
程序员怎么做副业赚钱？
