How are web animations turned into videos?
A scene is a function of time: Chromium captures it frame by frame, ffmpeg encodes the video and mixes in the narration.
Transcript
A scene is a pure function of time. Give it a moment, and it draws exactly that picture.
Canvas, S V G, or C S S, it does not matter. Nothing depends on a real clock.
The renderer opens the page in headless Chromium, and waits until fonts and assets are ready.
Then, for every frame, it calls set time, and takes a screenshot.
Several browser pages render in parallel, and the frames are put back in order.
They are piped into F F M peg, which encodes them as an H dot two six four video.
The narration is made separately: text becomes speech, one audio clip for each line.
Each clip's duration is saved, and the scene uses it to time its captions.
F F M peg delays every clip to its start time, and mixes them into a single audio track.
Video and audio are then combined into one M P 4 file, ready for the website.
A function of time, sampled frame by frame, mixed with narration. That is how a web animation becomes a video with sound.
