I’m currently working on a video editor and there is a feature where you can select a gif from Giphy and overlay it on top of your video after a header transition.
With FFmpeg you can manipulate, combine, add effects with filters. There is a filter called overlay
- that we can use.
This did not work as I expected:
To apply a filter after a certain amount of time we'll use the option enable
(this option allows for timeline editing).
The below script overlays the gif.mp4 on top of main_video.mp4 during the 1 - 3 seconds duration.
ffmpeg -i main_video.mp4 -i gif.mp4 -filter_complex
“[0:v][1:v]overlay=enable='between(t,1,3)'[out]”
-map [out] complete.mp4
** [0:v]
--> first video (main_video.mp4)
** [1:v]
--> the second video (gif.mp4)
** [out]
--> first and second video combined into one after the overlay.
Problem: gif.mp4 will start playing from the beginning so after 1 second has passed the gif video will be 1 second in already.
Solution:
Use the setpts
filter to delay the overlay video (gif.mp4) start with x seconds.
ffmpeg -i main_video.mp4 -i gif.mp4 -filter_complex
“[1:v]setpts=PTS-STARTPTS+1/TB[delayedGif];
[0:v][delayedGif]overlay=enable='between(t,1,3)'[out]”
-map [out] complete.mp4
The setpts filter evaluates its expression and assigns the value as the timestamp for the current frame it is processing. For a detailed explanation check out this awesome post.
For setpts=PTS-STARTPTS+1/TB
:
** +1
is the time in seconds we want to delay our offset
** TB is the timebase.
Too see the gif-overlay in action check out Glitterly - a web based video editor I've been working on.
I'm constantly posting more FFmpeg tips and tricks on Twitter (and happy to answer any questions!) - @AhlrothOskar.
Top comments (1)
I would love if you can provide the codesandbox along with the solution.