Up next in 10
Build a React.js FFMPEG Timeline Video Editor to Apply Zoom Effect & Add Overlay Text in Browser
Mar 12, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-react-js-ffmpeg-timeline-video-editor-to-apply-zoom-effect-add-overlay-text-in-browser/
Show More Show Less View Video Transcript
0:00
Uh hello guys, welcome to this video. So
0:02
in this video I'll show you I built out
0:04
a ReactJS timeline based uh video editor
0:07
directly in the browser
0:09
using ffmpg web assembly library. So we
0:12
are actually
0:14
uh executing it directly in the local
0:16
host. So just to show you the demo. So
0:19
it actually it's a single page
0:20
application directly running in the
0:22
browser. So this is actually the full
0:24
directory structure of this react video
0:27
timeline editor. It's every file is
0:30
customizable. So for the source code you
0:33
can directly purchase it. I've given the
0:35
link in the description of the video. So
0:36
it's actually using the FMPG web
0:39
assembly library. It's also using HTML
0:42
to canvas and also it is using the
0:45
latest version of React.
0:47
So now let me show you the demo of the
0:50
video editor. You simply select whatever
0:52
video file you want to edit. And now
0:55
here you can apply the zoom level and
0:58
text overlay. So right here
1:01
you also have get the sliders to
1:03
actually trim out the specific portion
1:05
of the video. So it's a fullyfledged
1:08
timeline based editor. So right here
1:10
wherever you need to add the zoom level
1:12
you simply click and right here
1:17
you can delete the zoom level as well.
1:20
So right here you can adjust the
1:23
position of the zoom wherever you need
1:25
to adjust the zoom. You can easily do
1:29
this. So now let's suppose I want to
1:31
zoom right here. You can also adjust the
1:34
zoom level as well right here.
1:37
So it looks something like this. You can
1:39
just see here
1:41
a professional looking zoom level
1:43
feature.
1:46
So you can even apply multiple zoom
1:48
levels. So now let's suppose at this
1:50
moment of time I need to apply another
1:52
zoom level. You can adjust the position
1:55
here.
2:03
From [snorts] here you can adjust the
2:05
duration.
2:15
So now what happens if you see we have
2:17
multiple zoom levels appearing right
2:19
here.
2:21
So in the videos you have seen this zoom
2:23
levels applied and similarly we also
2:26
have the option to apply text overlays.
2:28
You simply click add text and here you
2:32
can enter your watermark, company name.
2:37
Can adjust the size here. Everything
2:41
background color, text color, everything
2:43
is customizable.
2:45
And here you can adjust the position.
2:52
And uh it's very simple. So you can also
2:56
control the duration of this. So it will
2:58
appear at 8 to 11.
3:01
So just see the the output video will
3:04
look something like this.
3:09
So
3:11
you can adjust the starting and the
3:13
ending duration.
3:20
So then after you are done you can
3:22
simply click the export video button. As
3:24
soon as you click this, the ffmppg web
3:26
assembly will start processing your
3:28
video. You can also have the export
3:30
settings. We can adjust the quality of
3:32
the video as well from here. We can
3:35
adjust the preset everything. Export as
3:38
MP4. So now the processing will start.
3:41
FFMPPG will start encoding your videos
3:44
frame by frame. And once it completes,
3:46
it will automatically download the
3:48
output video. So if you're interested in
3:52
this project guys, it will save you a
3:54
lot of time because I built this editor
3:56
from scratch. You will get to know about
3:58
the FMPPG web assembly library how it
4:01
works directly in the browser.
4:04
So the link is given you can directly
4:06
purchase the full source code.
4:09
So it actually is a single page
4:12
application.
4:14
So it doesn't have a back end. So it's
4:17
very easy for you to deploy this
4:18
application as well. So as we are
4:21
running it locally, it's also very easy
4:23
for you to simply deploy this by
4:25
building out this project
4:28
and at any point of time you can add
4:30
additional features as well. It's fully
4:33
customizable.
4:34
Each file is coded inside TypeScript as
4:37
you can just see here.
4:43
So the processing will take some time
4:46
because as you know that video encoding
4:49
does take some time because we have
4:51
applied those zoom filters and text
4:54
overlays. So you just need to wait for
4:57
some time as the video is simply
5:00
encoding frame by frame. So once it
5:03
reaches 100% it will start
5:06
automatically download the output video.
5:19
So [snorts] you can just see here. So,
5:34
so I'm just showing you the full process
5:36
here so that you can trust on this that
5:39
this is a real application.
5:42
It is not a fake application. So, it
5:44
fully runs directly in the browser.
5:48
So,
6:19
So now you can see automatically the
6:21
video is successfully downloaded.
6:29
So automatically all the zoom levels the
6:33
text is also applied here. As you can
6:35
see the zoom levels are also applied.
6:43
So
6:45
the link is given guys. You can directly
6:47
purchase the project.