Up next in 10
Build a FFMPEG Canva Clone Timeline Video & Image Editor in Browser Using HTML5 & Javascript
Dec 13, 2025
Buy the Full Source code of Application here:
https://procodestore.com/index.php/product/build-a-ffmpeg-canva-clone-timeline-video-image-editor-in-browser-using-html5-javascript/
Show More Show Less View Video Transcript
0:04
Uh hello guys, welcome to this uh video.
0:07
In this live stream, I will basically
0:09
talk about a application that I
0:11
developed in HTML, CSS and JavaScript
0:14
which is essentially a video editor
0:17
which similar to Canva. It's a image and
0:20
video editor timeline which I developed
0:24
in ffmpg using uh HTML, CSS, JavaScript.
0:27
It's a fully 100% clientside application
0:30
which works in the browser and you can
0:32
just see in the demo right here as you
0:35
load the application I'm running it in
0:36
inside local host which is index html
0:39
and there is an option right here plus
0:41
icon where you can add images your
0:44
videos you can add PNG images JPG images
0:47
or video files any media files that you
0:49
can add right here and all the
0:51
extensions are supported so let me add
0:54
these image files
0:57
So as you basically add all these image
1:00
files will get added. So you can
1:02
basically create videos from a series of
1:05
images. You can just drag them in the
1:08
timeline like this. You can see the
1:11
image will get added. You can basically
1:13
control the duration of it by using the
1:15
mouse here. You will see that you can
1:18
drag this image second image like this.
1:22
So now
1:24
you can see that
1:27
similarly you can drag the third image
1:29
in the timeline. So you will basically
1:31
see guys there is if you play the video
1:33
right here if you click the play button.
1:36
So now the video will play and uh
1:40
essentially you will basically see each
1:41
image will appear for 10 seconds and you
1:44
will basically see uh as it
1:48
so [snorts] now it will go away. Nothing
1:51
will be there. And now the second image
1:53
will come right here. You will see that
1:54
the second image will come right here.
1:57
And this will also run. You can pause
1:58
the video by clicking the pause button.
2:01
And now you can basically drag the
2:02
timeline here like this. You can even
2:05
control the duration like this by just
2:07
controlling it.
2:10
And then if you click the image
2:11
individual image, you can basically
2:13
control the duration of this image which
2:16
will appear in the video. It will appear
2:18
for 5 second. And it you can control it
2:21
where it comes. So you can also just put
2:25
the duration right here at which uh time
2:29
the image will show up in the video. So
2:32
if you control it 15 second. So now
2:34
automatically this image will come at
2:36
the 15cond. You will see that. So you
2:39
can even simply click the image and just
2:42
control all these properties right here
2:44
in the panel right here as you click the
2:46
image. Or you can even control this by
2:48
using the mouse as well. So here you can
2:51
even uh delete this as well. Right click
2:54
and delete the images from the timeline.
2:56
And uh we have you can even add text as
3:00
well. You can add various shape shapes
3:02
as well. Add rectangle. You can even add
3:05
text as well. So let's suppose I want to
3:07
add some text. We can basically edit
3:10
this text.
3:12
So we can add edit this text here.
3:20
So you can add any text that you want
3:23
in.
3:27
So what will happen?
3:31
So this text will appear. You will see
3:33
that and we can control
3:37
uh let me delete this image. So what
3:40
will happen basically guys after this uh
3:43
image you can control the duration
3:49
and then let's suppose uh it this image
3:53
basically ends
3:55
at 7 second so I want this text to
3:58
appear so we basically we can control
4:01
this I can provide here seven so just
4:04
right here just after the image ends
4:07
this text will appear you will see that
4:09
so in the timeline this text will appear
4:11
and you can basically control the
4:13
duration how many seconds this text will
4:15
appear. So I will say only 2 second. I
4:18
want this text to appear only for 2
4:20
second. So what I will do right here.
4:30
So just pause the and just change to
4:34
two. So now this text will only appear
4:37
for 2 seconds and the duration of the
4:39
video will become
4:44
so image will appear for 7 seconds and
4:47
then the text will appear for you will
4:50
see that.
4:56
So lastly guys what we can do we can
4:58
basically render out this video. So go
5:00
to file menu and you can control the
5:02
video settings. So basically you can say
5:05
4K video you can export this format to
5:07
4K 1080p 720 if you're uploading to
5:10
YouTube you can basically select let me
5:12
select 1080p and then basically you can
5:15
give it a project name let's suppose
5:16
sample
5:18
you can give your project name and then
5:20
if you want to export this to webm or uh
5:24
mkv mp4 all these extensions are
5:27
available let me export this to mkv and
5:29
then render engine you can select these
5:31
two options power fast or Max Pro. Both
5:34
these options are actually using the
5:36
ffmpg library in the background using
5:38
HTML, CSS and JavaScript. So we are
5:40
using ffmpg web assembly library in the
5:43
browser to actually build this video
5:44
editor. So after you put all these video
5:47
settings now you can basically click on
5:49
export. So guy guys you will basically
5:52
see the video will play until the full
5:56
length of the video and automatically
5:57
the video will download after it reaches
5:59
you will see that video will download as
6:01
a MKV file that you selected and the
6:04
size is 1 mgabyte and if I try to play
6:07
this video you will see that the video
6:09
will play the video will contain this
6:11
image for which will appear for 7
6:13
seconds and then it will appear the text
6:15
after you will see the text that we
6:16
written and [snorts] you can basically
6:19
customize accordingly Guys, you can edit
6:21
these videos.
6:23
If you have a pre-made video, you can
6:25
even select that. Let me delete
6:28
everything from the timeline. Let's
6:30
suppose I uh go to my uh
6:35
a video that we have. So, a pre-made
6:38
video that I'm dragging right here.
6:39
Guys, this is actually a video file. If
6:42
I play this video file, it actually
6:45
contains some audio as well. Uh hello
6:46
guys, today in this tutorial I will
6:48
basically show this is actually a video
6:50
file guys that we are editing right
6:52
here. So we can perform all these
6:54
operations inside the browser. You can
6:57
uh simply select this fi file
7:02
and uh right here you can trim the
7:06
portion accordingly. Whichever portion
7:08
that you want you can basically click
7:10
split. So this portion will be splitted
7:14
right here. If you see if you want to
7:16
delete this portion you can simply click
7:18
delete and now this portion will remain.
7:26
So wherever you need to split the video
7:28
simply right click and click on split.
7:30
So the video will get splitted and then
7:32
you can click this delete this portion
7:34
right here. So in this way
7:39
you can basically
7:42
trim the portion whichever portion that
7:45
you want.
7:48
>> You now you can see our video has been
7:50
trimmed which is it only contains 2
7:53
minute 25 seconds.
7:55
>> So you will basically see uh you can
7:57
basically uh trim the portion that you
7:59
don't want. There is a split option.
8:03
So just go to the
8:06
uh actual time in the video using the
8:08
timeline. So just go to the direct uh
8:11
time period that you don't want. Simply
8:13
right click click on split. So what it
8:15
will do it will actually split the video
8:20
into two parts. You will see now this
8:22
part if you don't want this part you can
8:25
simply right click simply click on
8:27
delete. So now the portion has been
8:29
deleted. You will see only 1 minute 9
8:32
seconds are there. So what you can do is
8:34
that the link is g you can uh click on
8:38
the export option or you can go to video
8:40
settings and change by default it will
8:43
uh check the default settings of this
8:45
video which is 1080p video. You can even
8:48
increase the quality of this video to 4K
8:50
as well. You can change the resolution
8:52
of this video to 4K or you can compress
8:54
the size to 4 480p. This will actually
8:57
reduce the size of the video 360p 240p.
9:01
So if you need the full source code guys
9:02
of this application, the link is given
9:04
in the description. You can directly
9:06
purchase the full source code which is a
9:07
Canva clone video editor and image
9:09
editor. It's a complete 100% client side
9:12
application. If you are interested, the
9:14
link is given. You can directly purchase
9:15
it from my website. After you get after
9:18
you purchase it, you will get a zip file
9:20
from Google Drive which will look
9:21
something like this. This will the
9:23
actual directory structure. You will
9:25
actually get the JavaScript code, CSS
9:27
code and it works in entirely in the
9:30
browser guys. So this will the index
9:31
html file that you want to run. Simply
9:34
right click and open with live server.
9:35
So this will open your application and
9:38
this will some this will look something
9:40
like this. So it it requires no server.
9:44
It works entirely in the browser. It
9:46
doesn't require internet connection. It
9:48
is a great alternative to any third
9:50
party video editor that you use guys. It
9:53
works in the browser and it's a very
9:55
fast video editor which actually make
9:57
use of ffmppg library in the browser and
10:00
you can basically increase or decrease
10:02
the resolution quality of the video. You
10:04
can select from the drop-down. Let's
10:06
suppose I want to increase the quality
10:08
to 4K. I will select 4K.
10:11
So you can do that. You can even se
10:14
change the extension. Let's suppose I
10:15
want to convert to web webm format. I
10:18
will select webm format. All these
10:19
formats are supported. and then simply
10:22
select the render engine as well. So I
10:24
will select these options and then I
10:26
will simply export this video.
10:27
>> The link is given in the description. I
10:29
have given the full source code.
10:30
>> So uh you just need to make the payment.
10:33
After you make the payment you will
10:36
>> So basically guys it is now playing the
10:38
video. So until it plays the entirety of
10:41
the video. So it is just rendering it.
10:44
So you just need to keep this page
10:45
visible while the video is playing so
10:48
that it is successful in exporting the
10:50
video. So it it the exporting process is
10:53
very fast guys. It takes uh just the
10:56
length of the video. It you can see in
10:58
the background the timeline is moving.
11:01
So when it reaches the end of the video,
11:03
your video will automatically gets
11:05
downloaded as an attachment. So just
11:06
wait for the it to finish rendering it
11:09
and processing it. So your video will
11:11
get processed.
11:13
So it really is fast guys. If you are
11:16
interested the link is given in the
11:18
description and it's a great alternative
11:20
to actually edit your videos right in
11:22
the browser. Something like Canva. Canva
11:25
also does the same process which is also
11:28
image and video editor. It's a free
11:30
alternative. You don't need to go to
11:31
canva.com and edit your videos. You can
11:34
use this software which is coded
11:36
entirely in JavaScript. You can see
11:38
automatically it has converted to webm
11:40
format. 22 megabytes size has also been
11:43
reduced which is you will see that the
11:46
video is splited and now you can see
11:48
that I can turn on the volume as well.
11:51
>> Just need to make the payment. So you
11:52
can see that make the payment you will
11:54
get this zip file. You can let me turn
11:56
on the volumes.
11:57
>> So volume audio is also present guys of
12:00
inside the video. So you can see that
12:03
the video has already successfully been
12:05
splitted and uh the size has also been
12:09
reduced and resolution also has been
12:11
changed to 4K. And you can if you want
12:14
to add some watermark you can basically
12:16
select text right here and put the
12:18
watermark right here. If you want to
12:21
appear right inside the video you can
12:23
drag it to basically this watermark
12:26
should be appearing. You can see it is
12:28
appearing right in the center position.
12:31
The text color is white color. You can
12:33
basically change this color. If you
12:35
don't want the watermark to be appearing
12:37
in white color, you can just go to
12:39
inside the code and change it. It is all
12:42
customizable guys. And uh if you want to
12:45
just simply click and you can change the
12:48
watermark. Let's suppose you can change
12:51
the text here.
12:53
Let me put my channel name. You can
12:55
basically also change the font as well.
12:58
And uh let's suppose I want to
13:01
rotate it. So there is also a rotation
13:03
as well. So 45° I want to rotate this.
13:09
So it will rotate something like this or
13:11
minus 45 it will rotate in the clockwise
13:14
direction. And if I want to increase the
13:16
size of it so I can simply select you
13:18
will see that. So it will
13:21
look something like coding six. You'll
13:23
see that you can even control this uh
13:26
which is opacity as well. If you don't
13:28
want to appear you can control it to
13:30
50%. Just select 50. So now it will look
13:34
something like this. So now your
13:35
watermark is appearing guys. You can
13:37
make the payment in uh USD United States
13:40
dollar at pay change the border
13:43
which will be right here. So after you
13:46
copy JavaScript and HTML codes so it
13:50
will look something like this. So if you
13:53
want to do trim your video a little more
13:56
so we can simply now want to export this
13:59
video you simply click on file click on
14:02
export
14:02
>> the link is given in the description I
14:04
have given the full source code uh you
14:06
need just need to make the payment after
14:08
you make the payment
14:09
>> will also contain this text so
14:13
keep this page visible
14:18
okay just
14:27
reload this page. Sorry, I forgot to
14:34
drag the video like this. And here you
14:37
can basically select,
14:42
split, and delete that portion.
14:49
So just put right here and right click
14:52
split and delete.
14:55
So the trimming portion is really easy
14:58
guys using this timeline editor. So the
15:00
total length of video is 15 seconds. So
15:02
just make sure that you see right here
15:03
the total length which is 15 second. And
15:05
now you will put your text watermark
15:07
right here.
15:10
So it will need to appear right here. So
15:12
we can basically change this text
15:15
watermark.
15:19
So you can basically scale it
15:25
and we can rotate minus 45°.
15:28
You can control it anything.
15:33
So it will look something like this. You
15:34
can see how beautiful it is looking. And
15:37
opacity you can control 50%. So if I
15:40
want to now export this, click on
15:42
export. Uh hello friends, today in this
15:44
tutorial I will basically show you will
15:46
have this nice little watermark WhatsApp
15:49
which will automatically send messages
15:51
to multiple contacts using selenium
15:53
light is given.
15:54
>> Selenium is a web library. So let me
15:57
show you the description directly
15:59
purchase it. The video is successfully
16:01
exported and now hello friends. Today in
16:04
this tutorial I will basically show you
16:06
a
16:08
WhatsApp bot which will automatically
16:10
send messages. So you can basically go
16:14
to video settings and just 1080p just
16:23
render engine just need to control it
16:25
wherever you want to.
16:32
So now click on export once.
16:35
>> Uh hello friends. Today in this tutorial
16:36
I will basically show you a
16:40
WhatsApp bot which will automatically
16:42
send messages to multiple contacts here
16:44
using selenium library. Selenium is a
16:47
web scraping library in Python. So let
16:49
me show you. So you can see the video is
16:52
downloaded.
16:54
>> Uh hello friends. Today in this tutorial
16:55
I will basically show you. So some video
16:57
players guys will uh WhatsApp you can
17:00
basically play it in different it will
17:03
work in the browser. If you play it
17:06
if I show you if I drag this video in
17:09
the browser it will play. Some video
17:11
players uh support certain settings. So
17:14
it will not if I just
17:24
so if I want to play it you can have
17:27
various video players which are
17:29
available.
17:33
Uh hello
17:34
>> now you can see that it is playing right
17:36
here. You will see the watermark is
17:37
added. You will see this is the actual
17:39
watermark that we added. You will see
17:41
that the watermark has been successfully
17:43
inserted and you'll see the video
17:45
>> context here using selenium. So if you
17:48
are interested guys the link is given in
17:50
the description. You can directly
17:52
purchase this awesome awesome Canva
17:54
clone video and image editor that I
17:57
developed entirely in client side using
18:00
JavaScript HTML CSS. The link is given
18:02
in the description. You can directly
18:04
purchase it. After that you will get
18:05
this zip file from Google Drive after
18:07
you make the payment and you will
18:09
actually get this simple JavaScript code
18:12
HTML CSS which actually uses ffmpg web
18:14
assembly library to actually make this
18:17
awesome Canva clone editor. Thank you
18:19
very much guys for watching this video
18:21
and I will be seeing you in the next
18:23
live stream.