前端仅用JavaScript修改MP4视频分辨率是否可行？

可以实现，但需要借助浏览器的Canvas API和MediaRecorder API，不需要依赖外部服务或额外资源，仅在前端处理单个File对象。你提到的dashjs确实只针对DASH协议的mpd文件，不适合直接处理本地MP4。

核心思路 #

1. 将File对象加载到<video>元素中，获取视频的原始流
2. 通过Canvas绘制缩放后的视频帧，生成目标分辨率的画面流
3. 捕获Canvas的输出流，结合音频流（如果需要）用MediaRecorder录制为新的MP4
4. 将录制后的Blob转为File对象

示例代码 #

async function resizeMP4(file, targetWidth, targetHeight) {
  // 1. 加载视频到video元素
  const video = document.createElement('video');
  video.src = URL.createObjectURL(file);
  video.muted = true; // 避免播放权限问题
  await new Promise(resolve => video.onloadedmetadata = resolve);

  // 2. 设置Canvas目标分辨率
  const canvas = document.createElement('canvas');
  canvas.width = targetWidth;
  canvas.height = targetHeight;
  const ctx = canvas.getContext('2d');

  // 3. 处理音频（可选，若需要保留音频）
  const audioContext = new AudioContext();
  const source = audioContext.createMediaElementSource(video);
  const destination = audioContext.createMediaStreamDestination();
  source.connect(destination);
  const audioStream = destination.stream;

  // 4. 合并视频流与音频流
  const videoStream = canvas.captureStream();
  const combinedStream = new MediaStream([
    ...videoStream.getTracks(),
    ...audioStream.getTracks()
  ]);

  // 5. 配置MediaRecorder，录制为MP4
  const recorder = new MediaRecorder(combinedStream, {
    mimeType: 'video/mp4; codecs=avc1.42E01E,mp4a.40.2' // 指定H.264编码
  });

  const chunks = [];
  recorder.ondataavailable = e => chunks.push(e.data);
  recorder.onstop = async () => {
    const blob = new Blob(chunks, { type: 'video/mp4' });
    // 转为File对象
    const resizedFile = new File([blob], `resized-${file.name}`, { type: 'video/mp4' });
    console.log('处理完成：', resizedFile);
    // 这里可以使用resizedFile做后续操作
  };

  // 开始录制并播放视频，逐帧绘制到Canvas
  recorder.start();
  video.play();
  
  function drawFrame() {
    if (!video.paused && !video.ended) {
      ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
      requestAnimationFrame(drawFrame);
    } else {
      recorder.stop();
      audioContext.close();
      URL.revokeObjectURL(video.src); // 释放资源
    }
  }
  requestAnimationFrame(drawFrame);
}

// 使用示例：假设file是你的File类型变量
// resizeMP4(file, 640, 480);

关键限制 #

• 浏览器兼容性：并非所有浏览器都支持指定H.264编码的MP4录制，部分浏览器可能 fallback 到其他格式，需要测试目标浏览器。
• 性能瓶颈：处理高清或长视频时，前端CPU/GPU负载较高，可能出现丢帧或卡顿。
• 音频同步：手动合并音视频流可能出现同步问题，需要根据实际场景调整。
• 编码质量：MediaRecorder输出的视频质量可能不如专业工具，可通过调整bitrate等参数优化（部分浏览器支持）。

内容的提问来源于stack exchange，提问作者Altair Gonzalez