live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a FFMPEG Canva Clone Timeline Video & Image Editor in Browser Using HTML5 & Javascript
Jan 9, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-ffmpeg-canva-clone-timeline-video-image-editor-in-browser-using-html5-javascript/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
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 fmpg using HTML CSS JavaScript it's a
0:28
fully 100% client side applic which
0:30
works in the browser and you can just
0:32
see in the demo right here as you load
0:35
the application I'm running it in inside
0:37
Local Host which is index. HTML and
0:40
there is an option right here plus icon
0:42
where you can add images your videos you
0:45
can add PNG images jpg images or video
0:48
files any media files that you can add
0:50
right here any all the extensions are
0:52
supported so let me add these image
0:56
files so as you basically add all these
1:00
image 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 image
1:11
will get added you can basically control
1:13
the duration of it by using the mouse
1:15
here you will see that you can drag this
1:18
image second image like
1:21
this so
1:23
now you can see
1:26
that similarly you can drag the third
1:29
image in the timeline so you will
1:31
basically see guys there is if you play
1:33
the video right here if you click the
1:35
play button so now the video will play
1:38
and uh essentially you will basically
1:41
see each image will appear for 10
1:43
seconds and you will basically see as
1:47
it so now it will go away nothing will
1:51
be there and now the second image will
1:53
come right here you will see that the
1:54
second image will come right here and
1:57
this will also run you can pause the
1:58
video by clicking the pause button and
2:01
now you can basically drag the timeline
2:03
here like this you can even control the
2:05
duration like this by just controlling
2:09
it 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
appear in the video it will appear for 5
2:19
Second and you can control it where it
2:22
comes so you can also just put the
2:26
duration right here at which uh time the
2:30
image will show up in the video so if
2:32
you control it 15 second so now
2:34
automatically this image will come at
2:36
the 15 second you will see
2:38
that so you can even simply click the
2:41
image and just control all these
2:43
properties right here in that panel
2:45
right here as you click the image or you
2:47
can even control this by using the mouse
2:49
as
2:50
well so here you can even uh delete this
2:53
as well right click and delete the
2:54
images from the timeline
2:57
and we have you can even add add text as
3:00
well you can add various shap shapes as
3:02
well add rectangle you can even add text
3:05
as well so let's suppose I want to add
3:07
some text we can basically edit this
3:10
text so we can add edit this text
3:19
here so you can add any text that you
3:22
want
3:26
in so what will happen
3:31
so this text will appear you will see
3:33
that and we can
3:36
control uh let me delete this image so
3:40
what will happen basically guys after
3:42
this uh image you can control the
3:48
duration and then let's suppose uh it
3:52
this image basically
3:54
ends at 7 second so I want this text to
3:58
appear so basically we can control this
4:02
I can provide here seven so just right
4:04
here just after the imagent this text
4:07
will appear you will see that so in the
4:09
timeline this text will appear and you
4:11
can basically control the duration how
4:13
many seconds this text will appear so I
4:15
will say only 2 second I want this text
4:18
to appear only for 2 second so what I
4:21
will do right here
4:30
so just pause the and just change to two
4:35
so now this text will only appear for 2
4:37
second and the duration of the video
4:39
will
4:43
become so image will appear for 7
4:46
seconds and then the text will appear
4:48
for you'll see
4:55
that so lastly guys what we can do we
4:58
can basically render out this video
4:59
video so go to file menu and you can
5:02
control the video settings so basically
5:04
you can say 4K video you can export this
5:06
format to 4K 1080p 720 if you're
5:10
uploading to YouTube you can basically
5:11
select let me select 1080P and then
5:14
basically you can give it a project name
5:16
let's suppose
5:17
sample you can give your project name
5:20
and then if you want to export this to
5:22
webm or 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
fmpg library in the background using
5:38
HTML CSS and JavaScript so we are using
5:41
fmpg web assembly library in the browser
5:43
to actually build this video editor so
5:45
after you put all these video settings
5:48
now you can basically click on export so
5:51
guys you will basically see the video
5:53
will play until the full length of the
5:56
video and automatically the video will
5:58
download after it reaches as you will
6:00
see that video will download as a MKV
6:02
file that you selected and the size is 1
6:05
Megabyte and if I try to play this video
6:08
you will see that the video will play
6:10
the video will contain this image for
6:12
which will appear for 7 seconds and then
6:14
it will appear the text after you will
6:15
see the text that we written and you can
6:18
basically customize accordingly guys you
6:20
can edit these
6:22
videos if you have a pre-made video you
6:24
can even select that let me delete
6:28
everything from the timeline let's
6:30
suppose I uh go to my
6:34
uh a video that we have so a pre-made
6:38
video that I'm dragging right here guys
6:39
this is actually a video file if I play
6:42
this video file it actually contains
6:45
some audio as well hello guys today in
6:47
this tutorial I will basically show this
6:49
is actually a video file guys that we
6:51
are editing right here so we can perform
6:54
all these operations inside the browser
6:56
you can uh simply select this F
7:01
file and uh right here you can trim the
7:05
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
7:25
remain so wherever you need to split the
7:27
video Simply right click and click on on
7:29
split so the video will get splitted and
7:32
then you can click this delete this
7:33
portion right here so in this
7:38
way you can
7:41
basically trim the portion whichever
7:44
portion that you
7:47
want you now you can see our video has
7:50
been trimmed which is it only contains 2
7:53
minutes second so you will basically see
7:56
you can basically uh trim the portion
7:58
that you don't want
8:00
there is a split
8:02
option so just go to
8:04
the uh actual time in the video using
8:08
the 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
8:18
video into two parts you will see now
8:22
this part if you don't want this part
8:25
you can simply right click simply click
8:27
on delete so now the portion has been
8:29
deleted deleted you will see only 1
8:31
minute 9 seconds are there so what you
8:33
can do is that the link is you can uh
8:37
click on the export option or you can go
8:40
to video settings and change by default
8:43
it will uh check the default settings of
8:45
this video which is 1080p video you can
8:47
even increase the quality of this video
8:49
to 4K as well you can change the
8:51
resolution of this video to 4K or you
8:53
can compress the size to 4 4 480p this
8:56
will actually reduce the size of the
8:58
video 360 60p 240p so if you need the
9:01
full source code guys of this
9:03
application the link is given in the
9:04
description you can directly purchase
9:06
the full source code which is a canva
9:08
clone video editor and image editor it's
9:10
a complete 100% client side application
9:12
if you are interested the link is given
9:14
you can directly purchase it from my
9:16
website after you get after you purchase
9:18
it you will get a zip file from Google
9:20
Drive which will look something like
9:22
this this will the actual directory
9:23
structure you will actually get the
9:25
JavaScript code CSS code and it works in
9:29
entirely in the browser guys so this
9:30
will the index. HTML file that you want
9:32
to run simply right click and open with
9:35
live server so this will open your
9:37
application and this will some this will
9:39
look something like this so it it
9:42
requires no server it works entirely in
9:45
the browser it doesn't require internet
9:47
connection it is a great alternative to
9:50
any thirdparty video editor that you use
9:52
guys it works in the browser and it's a
9:54
very fast video editor which actually
9:56
make use of fmpg library in the browser
9:59
and you can basically increase or
10:02
decrease the resolution quality of the
10:04
video you can select from the drop- down
10:06
let's suppose I want to increase the
10:07
quality to 4K I will select
10:10
4K so you can do that you can even
10:13
change the extension let's suppose I
10:15
want to con convert to Web webm format I
10:17
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 the link
10:28
is given in the description I given the
10:29
full source code you need just need to
10:33
make the payment after you make the
10:34
payment you will so basically guys it is
10:37
now playing the video so until it plays
10:40
the entirety of the video so it is just
10:43
rendering it so you just need to keep
10:45
this page visible while the video is
10:47
playing so that it is successful in
10:50
exporting the video so it the exporting
10:53
process is very fast guys it takes just
10:56
the length of the video you can see in
10:58
the background the timeline is moving so
11:01
when it reaches the end of the video
11:03
your video will automatically gets
11:05
downloaded as an attachment so just wait
11:06
for the it to finish rendering it and
11:09
processing it so your video will get
11:12
processed so it really is fast guys if
11:16
you are interested the link is given in
11:17
the description and it's a great
11:19
alternative to actually edit your videos
11:22
right in the browser something like
11:24
canva canva also does the same process
11:27
which is also a image and video editor
11:29
it's a free alternative you don't need
11:31
to go to canva.com and edit your videos
11:34
you can 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 to
11:51
make you can see that make the payment
11:53
you will get this ZIP file you can let
11:55
me turn on the volume the CSS so volume
11:58
um audio is also present guys of inside
12:01
the video so you can see that the video
12:03
has already successfully been splitted
12:06
and the size has also been reduced and
12:09
resolution also has been changed to 4K
12:13
and you can if you want to add some
12:15
Watermark you can basically select text
12:17
right here and put the watermark right
12:19
here if you want to appear right inside
12:22
the video can drag it to basically this
12:25
Watermark should be appearing you can
12:28
see it is appearing right and the center
12:30
position the text color is white color
12:33
you can basically change this color if
12:34
you don't want the watermark to be
12:36
appearing in white color you can just go
12:38
to inside the code and change it it is
12:42
all customizable guys and uh if you want
12:45
to just simply click and you can change
12:47
the watermark let's suppose you can
12:50
change the text
12:52
here 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
13:00
to rotate it so there is also a rotation
13:03
as well so 45° I want to rotate
13:08
this so it will rotate something like
13:10
this or minus 45 it will rotate in the
13:13
clockwise Direction and if I want to
13:15
increase the size of it so I can simply
13:18
select you will see that so it
13:20
will look something like coding s you
13:22
will see that you can even control the
13:25
uh which is opacity as well if you don't
13:28
want to appear you can control it to 50%
13:31
just select 50 so now it will look
13:34
something like this so now your
13:35
watermark is appearing guys you can make
13:37
the payment in uh USD United stat dollar
13:40
at the
13:42
B 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:52
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 the link is given in the
14:03
description I have given the full source
14:05
code uh you need to just need to make
14:07
the payment after you make the payment
14:09
it will also contain this text
14:12
so keep this page
14:17
visible okay just
14:26
uh reload this page sorry I forgot
14:33
to drag the video like this and here you
14:36
can basically
14:41
select split and delete that
14:48
portion so just put right here and right
14:52
click split and
14:54
delete so the triming portion is really
14:57
easy guys using this timel line editor
14:59
so the total length of video 15 seconds
15:01
so just make sure that you see right
15:03
here the total length which is 15 second
15:05
and now you will put your text Watermark
15:07
right
15:08
here so it will need to appear right
15:12
here so we can basically change this
15:14
text
15:18
Watermark so you can basically scale
15:24
it and we can rotate Min -
15:27
45° you can control it
15:32
anything so it will look something like
15:34
this you can see how beautiful it is
15:35
looking and opacity you can control 50%
15:39
so if I want to now export this click on
15:42
export uh Hello friends today in this
15:44
tutorial basically show you have nice
15:47
little Watermark addapp which will
15:49
automatically send messages to multiple
15:51
contacts USI Li selenium
15:55
is time the link description purchase it
15:59
the video is successfully exported and
16:03
now hello friends today in this tutorial
16:04
I will basically show you
16:07
a what have bought which will
16:09
automatically send messages
16:12
so you can basically go to video
16:14
settings and just 1080p
16:22
just render engine just need to control
16:25
it wherever you want to
16:32
so now click on export one uh Hello
16:35
friends today in this tutorial I will
16:36
basically show you
16:39
a WhatsApp bot which will automatically
16:42
send messages to multiple contacts here
16:44
using selenium Library selenium is a web
16:47
scraping library in Python so let me
16:49
show you so you can see the video is
16:53
downloaded uh Hello friends today in
16:55
this tutorial I will basically show you
16:56
some video players guys will uh whatspp
17:00
you can basically play it in different
17:03
it will work in the browser if you play
17:05
it 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:13
it will not for
17:23
just so if I want to play it you can
17:27
have various video players which are
17:32
available hello now you can see that it
17:35
is playing right here you will see the
17:36
water mark is added you will see this is
17:38
the actual Watermark that we added you
17:40
will see that the watermark has been
17:43
successfully inserted and you'll see the
17:45
video
17:46
cont so if you are interested guys the
17:49
link is given in the description you can
17:51
directly purchase this awesome awesome
17:54
canva clone video and image editor that
17:57
I developed entirely in client site
17:59
using JavaScript HTML CSS the link is
18:02
given in the description you can
18:03
directly purchase it after that you will
18:05
get this ZIP file from Google Drive
18:07
after you make the payment and you will
18:09
actually get this simple JavaScript code
18:11
HTML CSS which actually uses fmpg 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
#Flash-Based Entertainment
#Online Video
#Software
#Multimedia Software
#Online Goodies
#Clip Art & Animated GIFs
#Photo & Video Sharing
#Animated Films
#Video Sharing