浏览器中如何将本地视频导出带声音的webm视频？

在浏览器中将本地视频导出为带声音的 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>

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' });
    con...

点击查看剩余70%