Up next in 10
Build Next.js Wondershare Filmora Clone Video Timeline Editor Using FFMPEG WASM in Browser Using TS
Dec 4, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-next-js-wondershare-filmora-clone-video-timeline-editor-using-ffmpeg-wasm-in-browser-using-ts/
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
Uh hello guys uh welcome to this live
0:02
stream. So in this live stream I'll show
0:03
you I built out a one share fila clone
0:07
video editor with timeline in nextjs. So
0:11
let me show you the demo of the
0:12
application. I've also given the link
0:14
where you can purchase the full source
0:16
code. This is a fullyfledged nextjs
0:19
project here. As you can see once you
0:21
purchase you will get this directory
0:23
structure. All the components are
0:25
divided into its multiple. This is the
0:27
button component. This is the edit
0:30
editor component. So everything is
0:31
divided into its appropriate files. So
0:34
all the source code files are coded
0:36
inside TypeScript as you can see right
0:38
here. And if I show you the package JSON
0:41
file here, it's actually built using
0:43
FMPG web assembly library. And we are
0:47
also using remotion as well which is a
0:50
really popular library for video inside
0:56
React and Next.js. So if I show you, we
0:59
are using the latest version of next
1:00
here. This is a fully fledged next
1:03
project. Uh now if I show you uh once
1:06
you land on this you basically get this
1:08
interface
1:11
welcome screen. So here you click on get
1:13
started and here you can create multiple
1:16
projects as you can do inside
1:18
Wondershare Filmora.
1:20
You click on add project and you
1:22
basically give it a name here. Let's
1:24
suppose I say first click on create. As
1:27
soon as your project is created, simply
1:30
click on this and now the timeline will
1:32
open as opposed to many edit video
1:34
editors which are very much popular like
1:37
fila, wondershare, fila. So it directly
1:40
works in the browser. No need to install
1:42
any sort of third party application. So
1:45
right here using this button here add
1:47
media you basically add your video
1:49
files, image files, audio files, any
1:52
sort of files. So basically I added this
1:55
video here and I click the plus icon to
1:58
add the video to the canvas. Uh hello
2:00
guys, welcome to this video. So it's
2:02
very easy to add the video. As you can
2:04
see the video has been successfully
2:06
added. Now we can basically perform
2:08
splitting operation using this timeline.
2:10
Simply select the video here. You can
2:13
adjust any property here. You can adjust
2:16
the width, the height of the video.
2:20
You can even basically
2:22
if you want to lower the audio you can
2:25
even do that. So using this slider you
2:29
can adjust the volume really simple and
2:31
then if you want to do any sort of
2:33
splitting operation simply you have the
2:36
split button and you click the split
2:38
button and now the video will be
2:39
splitted into two parts. So now if you
2:42
don't want this part you can actually
2:44
click the delete button. Everything is
2:46
go away. Now we only got this first two
2:48
seconds.
2:50
So it's really simple to cut and split
2:52
videos which are really long and you
2:54
don't want entirety. Then we also have
2:57
the option to add text. If you see you
3:00
click the text button and if you want to
3:02
add some kind of watermark you can even
3:04
add that
3:07
just click add text. And now for the
3:09
positioning you can basically adjust
3:11
using these sliders.
3:13
Just select
3:15
the text.
3:21
So using this X Y position you can add.
3:32
So it's really simple here. You can see
3:34
that.
3:40
And
3:42
these are the visual properties. If you
3:44
want to change the color of the text,
3:46
you can even do that as well. So it's
3:48
really simple.
3:49
Welcome to this video.
3:51
And then we get this here. So if you
3:54
want to move the positioning of the
3:55
text, you can basically adjust just
3:57
select the text and in the right hand
3:59
side corner of the screen, you can
4:00
manipulate the X position, Y position to
4:03
adjust it properly.
4:05
And uh same goes with images as well. go
4:09
to library and if you want to add any
4:11
sort of image in the timeline simply
4:12
select the image and just add this to
4:15
the timeline. So now the image will also
4:17
get added. You basically select the
4:20
image and uh if you want to adjust its
4:23
opacity, you can even do that. You can
4:26
also
4:30
if you want to adjust
4:33
its width and height, you basically
4:37
so it's very simple as you can see. Then
4:40
we also have the export button.
4:43
You can remove elements from the
4:44
timeline. Simply select them and you can
4:46
delete them as well.
4:51
Click split and then delete. Then if you
4:54
want to export this, you click the
4:55
export button. And here from the
4:57
quality, you can adjust the quality as
4:59
well. 480p, 720, 1080p, full HD,
5:03
quality, high, processing speed,
5:04
everything. Click on render. And now
5:07
using FMMPG web assembly library and
5:09
remotion library uh all the files will
5:14
be exported. So you just need to wait
5:17
for some time as the processing is
5:20
taking place. Once it completes your
5:22
video will be downloaded. So this is a
5:24
fullyfledged video editor like
5:26
Wondershare Filmora. I built it inside
5:29
next years. If you are interested I have
5:31
given the link to purchase the full
5:33
source code here. So as you can see it's
5:36
built entirely in nextJS each and every
5:39
code is in typescript.
5:42
So if you have knowledge you can
5:43
basically modify the source code as well
5:45
and add additional features on top of
5:47
it. So it's a great project. I built it
5:50
from scratch. So I have given the link
5:53
in the description. I've given shown you
5:56
the demo and uh you can basically
5:59
purchase it. So each and every component
6:01
is coded inside it is appropriate file.
6:04
So it's really easy for you to run this
6:07
project. We are running it by simply npm
6:11
rundev. So this will start the local
6:13
development server at localhost 3000. So
6:17
definitely uh try this guys. It's really
6:20
popular editor.
6:30
So now the processing is complete. You
6:32
will see the button is appearing save
6:35
video. If I click save video, everything
6:37
will be saved here. First mp4. So here
6:40
we can actually play the video here.
6:45
Hello guys,
6:46
the text is added here. As you can see
6:48
the image is also added
6:51
to this video.
6:52
So it's really simple guys. If you are
6:54
interested, the link is given in the
6:57
description.
#Online Media
#Online Video
#Programming