0:00
So in this live stream I'll show you I
0:02
basically built out a NexJS uh video
0:05
timeline editor similar to Viva video
0:08
which is a very popular app for editing
0:10
your videos applying different kinds of
0:12
effects. So this application I developed
0:15
in nextjs as you can see we are using
0:17
ffmppg web assembly library remotion as
0:20
well and you can see we are using nextjs
0:23
latest version and once you purchase it
0:26
I've given the link in the description
0:28
of the video you will get this directory
0:29
structure each and every component is
0:32
coded inside its appropriate typescript
0:34
file here and now to run this project
0:37
it's very simple you go to the command
0:39
line after you purchase it npm rundev So
0:43
this will start this next year's local
0:46
development server at localhost 3000.
0:49
It's really simple to run and also
0:54
if I show you localhost 3000.
1:00
So once the project starts you will be
1:02
granted with a welcome screen where you
1:04
can create multiple projects using the
1:07
timeline. So this is a welcome screen.
1:10
Here you click on get started and here
1:12
you can create multiple projects.
1:17
You can basically trim your videos. You
1:19
can adjust settings of the video as
1:22
well. Click on add project.
1:29
Once you click this, you will be granted
1:31
with the timeline editor.
1:34
Right here you will add your media
1:36
files. whatever image file, video files
1:43
After that you can add the video to the
1:45
canvas or the timeline.
1:47
Uh hello guys, welcome to this
1:49
background from image kind of a offline
1:51
editor that I developed inside HTML and
1:53
JavaScript as as you can see
2:03
you just need to select the voice is now
2:06
coming in the browser itself.
2:08
So this is the video you can add to the
2:11
So it's really simple to add the video
2:13
to the timeline. After that you can also
2:16
split the video by just placing the
2:18
marker to wherever you want to split
2:20
this. So now you can basically delete
2:22
this portion if you don't want this. So
2:24
it's really simple. You can delete
2:26
videos as well. Hello guys, welcome to
2:28
the and then if you want to export this
2:32
video you have the export button as
2:36
So I have given the link guys you can
2:38
directly purchase the full source code
2:40
of this nextjs project. The link is
2:42
given in the description. So once you
2:43
purchase it, you will get this full
2:45
directory structure and uh you click on
2:48
export and here you can change the
2:51
quality of the video as well. Click on
2:53
render and now the FMPG will start
2:56
processing your video and will show you
2:58
this progress bar. So once it completes
3:01
you will basically see your output video
3:03
file created. So this will hardly take 5
3:06
to 10 seconds and this is similar to
3:10
Viva video mobile app.
3:13
This is a clone that I developed similar
3:17
Viva video which is a very popular app
3:20
for editing your videos.
3:24
So it basically executes directly in the
3:27
browser. It doesn't have any sort of
3:30
back end. It's a single page
3:31
application. And now you can see the
3:33
video is rendered successfully. And here
3:35
you can save the video file.
3:41
Uh hello guys, welcome to this video. So
3:44
it's really simple. Uh you also have the
3:50
Just click the add text button. And here
3:53
you can add the text and just select the
3:56
text and if you want to change
4:00
the color of the text, you can even do
4:02
that using this color picker. And you
4:05
can adjust the positioning. Everything
4:14
and same goes for images as well. You go
4:17
to library and here you can add your own
4:23
So it's really simple and then you can
4:25
export it. So this is a fully fleshed
4:28
editor guys. If you are interested I've
4:29
given the link you can directly purchase
4:32
the full source code. If you have
4:34
knowledge, you can even modify this or
4:36
add additional features on top of it as
4:38
well. So definitely try this.
