0:00
I built out a NexJS video timeline
0:03
editor uh which directly executes it in
0:06
the browser. For this we have used a
0:08
very famous react library for building
0:13
for editing videos and making pro videos
0:15
programmatically which is called as
0:19
So we have used this very popular
0:23
inside our nextjs project. So this is a
0:26
fullyfledged timeline editor. So just
0:28
wait let me open the zoom it tool so
0:30
that I can zoom in on the
0:34
So this is the editor right here. Here
0:36
you will actually add the media file. So
0:39
we are running it on localhost 3000. So
0:41
we are using this remotion.dev library
0:46
for editing the videos and also using
0:48
ffmpg web assembly library. So I have
0:51
given the link in the description. You
0:52
can directly purchase the full source
0:56
So we are running this at uh local host
0:59
here npm rundev. So it is compiled
1:02
successfully. Let me show you the demo
1:03
here. So first of all you actually add
1:07
the actual video files or images.
1:13
You basically add the video to the
1:15
canvas here. So once you add the video
1:17
to the canvas play the check out page
1:19
where you can purchase. Then you also
1:21
have the option to add tech
1:24
text as well. You can change visual
1:27
properties regarding text such as the
1:29
color of the text. You can even align
1:32
this perfectly using manipulating the XF
1:35
position and the Y position.
1:38
You can even change the phone size like
1:42
It's very simple. At any point of time
1:44
you want to split the video, you can
1:46
click the split button. uh in this easy
1:48
way you can delete the unnecessary
1:50
portion here. So same goes with the text
1:55
So very simple you can see that. So how
1:57
easy it is and then we also get the
1:59
export button. Same thing you can do
2:02
this with images as well. You can add
2:03
this to the audio files as well. And
2:07
then here you can manipulate the quality
2:09
of the video by selecting the resolution
2:12
processing speed and then click render.
2:14
As soon as it does it basically shows
2:16
you the progress bar. So once it
2:18
completes you will be able to download
2:20
the output video file. So with the help
2:23
of this you can create edit your videos
2:26
directly in the browser. It's a single
2:36
So all the source code will be given in
2:38
the description. So this is the full
2:40
directory structure. Uh
2:43
you will be All the files are coded
2:45
inside typescript. So as you can see
2:51
we are using ffmppg library. We are also
2:54
using next. So the link is given. You
2:57
can purchase the so now you can see the
2:59
video is created. You can click the save
3:01
video button to download the video. So
3:04
this is a really awesome uh
3:06
will be redirected to the check out
3:08
page. Canva clone video editor that I
3:11
built using this remotion library which
3:16
and if you're interested you can
3:18
purchase it the link is given in the
