FFmpeg export outputs only first input video while React preview shows multiple clips (concat & split-screen case) [closed]

3 weeks ago 19
ARTICLE AD BOX

I’m building a web-based video editing SaaS using Next.js (frontend) and Node.js + FFmpeg (backend export).
The app has two export workflows that share the same export service:

Rankings export – multiple video clips are ordered and exported as one stitched video

Split Screen export – two videos are combined into a top/bottom split layout


Problem Description

Preview behavior (works correctly)

Preview is rendered using React + CSS

Multiple clips play smoothly in the Rankings editor

Ordering is correct

Split Screen preview correctly shows both videos

Subtitles are visible in preview

Export behavior (broken)

FFmpeg export completes without errors

Output file is generated successfully

Rankings export only includes the first video clip

Remaining clips are ignored or cause glitches

Split Screen export only shows one video input

Subtitles do not appear in the exported video

So the issue is not playback, but incorrect FFmpeg rendering logic.


Relevant Technical Details

All source videos are valid MP4 files

Videos may have:

different resolutions

different frame rates

Export is triggered via a Node.js backend using child_process

No FFmpeg errors or warnings are logged

Export currently runs a single FFmpeg command


Suspected Causes

Rankings export

Only the first input video is passed to FFmpeg

No proper concat logic is applied

Clips are not normalized before concatenation

Split Screen export

FFmpeg is invoked with multiple inputs but without a proper filter_complex

Only one input stream is mapped to the output

Subtitles

Subtitles exist only in frontend state (DOM/CSS)

They are not burned into the video during FFmpeg export


What I’m Trying to Do

Rankings export

Take an ordered array of MP4 clips

Normalize them to:

same resolution

same frame rate

same codec

Concatenate them into one smooth MP4 output

Split Screen export

Take two MP4 inputs

Combine them into a top/bottom layout

Output a single 1080×1920 video

Subtitles

Burn subtitles into the exported video so they appear in the final file

What I’m Looking For

Correct FFmpeg approach for:

sequential concatenation of multiple clips

parallel compositing (split screen)

Common mistakes that cause FFmpeg to silently export only one input

Best practices for handling mixed FPS/resolution clips during export


What I’m Not Looking For

Frontend preview solutions

iframe/embed-based approaches

UI-level fixes


Key Question

What is the correct FFmpeg strategy to ensure that:

all input videos are included in the export (not just the first)

multi-input layouts (split screen) are rendered correctly

export output matches the preview behavior?

Read Entire Article