Up next in 10
Build a Next.js Video Timeline Editor to Compress & Trim Videos in Browser Using FFMPEG WASM in TS
Mar 3, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-video-timeline-editor-to-compress-trim-videos-in-browser-using-ffmpeg-wasm-in-ts/
Show More Show Less View Video Transcript
0:01
Uh hello guys. In this video, I'll show
0:03
you a NexJS video timeline editor that I
0:07
built in inside Next.js to compress and
0:10
trim your videos. So this is the full
0:11
directory structure of the project. I've
0:14
given the link in the description of the
0:15
video. You can directly purchase the
0:17
full source code. And if I show you the
0:19
package.json file, it's built entirely
0:22
inside uh NexJS. As you can see, we are
0:26
using the latest version. And for this
0:29
we are using ffmpg web assembly library
0:33
to do the processing. So it's each and
0:35
every component is divided into its
0:37
appropriate typescript file. So now to
0:40
run this project it's simple. You simply
0:42
execute npm rundev. So this has started
0:44
the local development server at
0:46
localhost
0:48
4000. So let me just show you the actual
0:52
application.
0:56
So it's a single page application. All
0:58
the processing happens directly in the
1:00
browser. So this is the welcome screen.
1:02
So here you will select your video that
1:04
needs to be compressed and trimmed.
1:07
So here you first of all select the
1:11
video file.
1:13
After selecting that redirected to the
1:15
>> the video will play here to the check
1:18
out page.
1:20
So now we have this nice little timeline
1:23
where you can actually cut out
1:26
the necessary portion that you want to
1:28
cut using this nice little timeline
1:30
editor. So as you change it the starting
1:34
and the ending duration will also change
1:36
and it will show you the total number of
1:38
duration of the video.
1:41
So now if you want to cut this portion
1:44
you can actually do this. select it and
1:46
after that you can even change the
1:48
quality of the video as well from using
1:50
the uh drop-down you can compress the
1:52
size
1:54
if you're sending it through email
1:56
WhatsApp discord you can select you can
1:58
even convert this into a GIF file as
2:00
well
2:02
click on start and after that the
2:04
processing will start fmpg will do the
2:06
processing for you it will also show you
2:08
this progress bar once it reaches 100%
2:11
you will see the output file will be
2:13
created and you will be able
2:16
And you can see
2:16
>> so now the file has been successfully
2:18
created. Again you can click the
2:20
download button to save the video file.
2:23
So this is an ultimate audio video
2:25
editor with timeline which is developed
2:28
in XJS. If you want to cut and change
2:31
the quality of the videos directly in
2:33
the browser. So the link is given you
2:36
can directly purchase it. You can
2:38
basically
2:40
also have the option to record the
2:42
screen as well. If you simply want to
2:45
record, you can even do this as well.
2:48
Start. It will start screen recording.
2:51
After that, you can stop it and then it
2:53
will encode your video.
2:56
So, this is an ultimate NexJS project
2:59
and uh
3:02
it's easy to deploy. run this locally or
3:05
you can even run it to deploy this to a
3:08
domain name as well. So this is the
3:10
overall project ffmpg web assembly
3:13
library we are using for it for cutting
3:15
and compressing your videos using a
3:18
timeline editor. So very good editor. So
3:22
I'm showing you the demo here. So the
3:24
link is given this tool and you can see
3:28
can even change it to a animated GIF
3:31
file. Simply select the portion and just
3:33
click start.
3:42
So the link is given guys in the
3:44
description. You can
3:48
check it. I have shown you the demo
3:51
here. If you are interested, you can
3:53
purchase the source code.
4:01
You can see that. So it's a single page
4:03
application. All the processing is
4:05
happening direct
4:09
purchase this tool and