React+Node环境下无需FFmpeg实现视频合并预览的方案咨询

一、可行性解答 #

前端Canvas实现预览 #

完全可行。Canvas可以逐帧渲染视频画面，模拟视频合并后的播放效果，适合仅预览的场景——不需要真正合并视频文件，只是按顺序播放并渲染画面，节省后端处理资源和用户等待时间。

后端非FFmpeg模块实现 #

可以实现，但有局限性：

• 可选模块：node-video-lib（支持MP4、AVI等格式的拼接）、mp4box.js（专注MP4文件处理）
• 限制：这类模块对视频编码参数要求严格（需保证所有视频的分辨率、帧率、编码格式一致），复杂编码场景下兼容性不如FFmpeg，仅适合简单的预览级合并需求。

二、Canvas顺序播放具体实现方案 #

你当前的问题是同时播放所有视频，改用单个隐藏的video元素+Canvas逐帧绘制的方式，就能实现按顺序播放，前一个视频结束后自动切换到下一个。以下是React组件示例：

import { useState, useRef, useEffect } from 'react';

const SequentialVideoCanvas = ({ videoUrls }) => {
  const [currentVideoIdx, setCurrentVideoIdx] = useState(0);
  const videoRef = useRef(null);
  const canvasRef = useRef(null);
  const animationIdRef = useRef(null);

  useEffect(() => {
    if (videoUrls.length === 0) return;

    const video = videoRef.current;
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    // 加载当前视频
    video.src = videoUrls[currentVideoIdx];

    // 视频元数据加载完成后，同步Canvas尺寸
    video.onloadedmetadata = () => {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
    };

    // 持续绘制视频帧到Canvas
    const renderFrame = () => {
      if (!video.paused && !video.ended) {
        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
        animationIdRef.current = requestAnimationFrame(renderFrame);
      }
    };

    // 视频开始播放时启动帧绘制
    video.onplay = () => {
      animationIdRef.current = requestAnimationFrame(renderFrame);
    };

    // 当前视频播放结束后，切换到下一个
    video.onended = () => {
      cancelAnimationFrame(animationIdRef.current);
      if (currentVideoIdx < videoUrls.length - 1) {
        setCurrentVideoIdx(prev => prev + 1);
      }
    };

    // 组件卸载或视频切换时清理资源
    return () => {
      cancelAnimationFrame(animationIdRef.current);
      video.pause();
      video.src = ''; // 释放视频资源
    };
  }, [currentVideoIdx, videoUrls]);

  return (
    <div>
      <canvas ref={canvasRef} />
      {/* 隐藏原生video元素，仅用于播放和获取帧数据 */}
      <video 
        ref={videoRef} 
        style={{ display: 'none' }} 
        controls={false} 
        autoPlay 
      />
    </div>
  );
};

export default SequentialVideoCanvas;

关键逻辑说明 #

1. 单视频实例复用：只用一个video元素，每次仅加载当前需要播放的视频，避免多视频同时播放的问题。
2. 帧绘制控制：通过requestAnimationFrame同步绘制视频帧到Canvas，保证画面流畅度。
3. 顺序切换触发：监听video的ended事件，播放完成后自动切换到下一个视频索引，重新执行渲染逻辑。
4. 资源清理：组件卸载或视频切换时，停止帧绘制并释放视频资源，避免内存泄漏。

三、使用方式 #

在你的页面中引入该组件，传入视频URL数组即可：

<SequentialVideoCanvas videoUrls={['video1.mp4', 'video2.mp4', 'video3.mp4']} />

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