live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a Next.js FFMPEG WASM Video and GIF Editor to Trim,Crop & Change Speed in Browser Using TS
Jan 9, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-next-js-ffmpeg-wasm-video-and-gif-editor-to-trimcrop-change-speed-in-browser-using-js/
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 welcome to this video so
0:02
in this video I developed this next
0:04
year's ultimate video editor trimmer and
0:07
all these things you can perform here
0:09
it's a fully fleshed web application
0:12
which runs in the
0:13
browser it's a video editor made M made
0:16
using fmpg web assembly library and next
0:20
CH is framework so you can see that I'm
0:22
running this application on Local Host
0:24
3000 in my local development environment
0:27
so this will open inside the browser and
0:30
here you need to first of all you have
0:32
the option to actually select the local
0:34
video file or you can even import video
0:37
from YouTube as well by entering the URL
0:40
and first of all let me show you the
0:41
example of importing video from your
0:43
local device so what you will see you
0:46
need to choose the video file all
0:48
extensions are supported MP4 AVI Let Me
0:52
select my video file so as you select
0:54
the video file you need to click the
0:56
load video option so now you will see
0:58
that it will actually show the video
1:00
inside the video player and now you can
1:02
see that the video is playing we have
1:04
this player you can navigate to any
1:07
section in the video by using this
1:09
control out there so the very first
1:11
function here is actually allow to
1:14
actually trim your video so you can
1:17
actually set the starting time by
1:18
clicking this button and now you can see
1:20
it has set the starting time and now you
1:22
can end your just set the ending time
1:26
and now as I click this button you will
1:28
basically see it has uh this is my
1:30
starting time and this is my ending time
1:32
I need to basically trim this portion of
1:35
the video in between this is starting
1:37
time and this is the ending time you can
1:39
even adjust it from here also you can
1:41
see that you can adjust it from here
1:44
also just uh in the video and the video
1:48
will also update as you basically change
1:50
this value in the slider so this is the
1:52
starting time and the ending time so now
1:54
if you are confident if you are done
1:57
right here you can play the video right
1:58
here or
2:00
if the video has sound you can increase
2:02
the volume of the video as well by using
2:04
this slider this video has not doesn't
2:08
have sound so I will not and now we also
2:11
have the option to change
2:13
FPS you can even change the resolution
2:15
of the video by changing the scale
2:17
quality you can even change the speed of
2:19
the video so you can even crop the video
2:22
so all these functionalities are built
2:24
in inside this powerful video editor
2:26
guys and now you can even now in the
2:30
output section you can convert this into
2:32
a gif file or you can convert this into
2:34
MP4 video file webp file fvov MP3 wave
2:39
give PNG all these extensions are
2:41
available let me just convert this into
2:43
a mp4 file and now we have this convert
2:46
option so first of all I will change
2:48
this to
2:50
a 1280
2:52
by so I what I will do is that yeah
3:00
so 100% I will set it to or
3:03
75 yeah so I want full HD video so I
3:07
will simply select here 50% so it will
3:09
be converted into 1920 by 180 pixel so I
3:12
will simply click the convert option
3:15
convert button so now fmpg will execute
3:18
that you can see the fmpg is running
3:20
here and you can see it is also showing
3:23
you the progress that it has made so
3:25
once it reaches 100% it will actually
3:27
show you the output video which has it
3:29
trimmed from 2 second to 7 second so the
3:33
length of the output video will be 5
3:35
Second so once it is completed it will
3:37
hardly Take 5 to 10 seconds depending
3:39
upon the processing power of fmpg web
3:42
assembly in the browser so it is
3:44
executing it inside the browser using
3:46
the help of next ch's fmpg web assembly
3:50
so once it is done it will actually show
3:52
you the output
3:53
video you can see it is clearly showing
3:56
you this uh progress bar that you can
3:58
see right here
4:03
so we have also set the fps to be 30 FPS
4:06
speed of the video will be
4:17
one so you can see now the output file
4:21
is ready length of the output video is 4
4:23
second that we selected you will see
4:25
that you can calculate you can play the
4:27
video file
4:30
and you can see that now there is an
4:33
option here to actually download the
4:35
video Simply click download and now you
4:37
can see that the video is successfully
4:39
downloaded you will see that you can
4:41
play it inside your video player it's a
4:43
very fantastic application guys you
4:45
don't need any third party website or to
4:47
actually edit your videos you can
4:49
perform it inside the browser itself it
4:51
is totally uh U very good application
4:56
and now let me show you if I change the
4:59
quality here if I make this video as
5:03
smaller let's suppose
5:05
25% the length of the video to be
5:11
smaller and click on convert so now the
5:14
video will become smaller guys you will
5:16
see that the resolution of the video
5:18
will become
5:19
smaller you just need to set basically
5:26
your click on convert
5:34
so the minimum size of the video needs
5:37
to be maintained guys here so just make
5:39
sure that your video should have a
5:41
minimum size to actually run fmpg so
5:46
below that size you can't resize video
5:48
to that level
6:02
so there is also a second option right
6:04
here in this editor guys which uh if I
6:07
show you I load the video
6:13
here let me choose this video click on
6:16
load video you can see that if I turn on
6:19
the volume
6:20
here so you can hear actually the uh
6:25
volume in the video so we can even
6:28
adjust you can increase the volum volume
6:29
here by using the slider this or we can
6:32
decrease the volume as
6:34
well you can see that we can remove the
6:37
volume in the video by using the slider
6:39
or we can increase it as well you can
6:41
see you can hear the volume as well now
6:43
if I want
6:47
to you can adjust
6:50
it and now if you want to decrease the
6:54
speed as well you can adjust it
6:58
0.5 speed
7:00
click on convert so now
7:02
the video speed will be decreased
7:05
because we have
7:07
0.5x we have decreased the speed of the
7:09
video so now it is doing its processing
7:13
so once it is completed it it will be
7:15
converted into this time gif file G it
7:18
will be converted into a gif animation
7:21
you will see that guys so now it will
7:24
give Animation will repeat unlimited
7:26
number of times so if you don't want to
7:29
repeat it you can set this option to
7:31
only run once or Loop it by default all
7:34
GI files repeat unlimited number of
7:36
times so this option is set by default
7:39
and now you can simply download this GI
7:41
file inside your computer so this makes
7:43
it very much easy guys to actually make
7:46
GIF files from video files you can trim
7:49
trim it and then you can set all these
7:51
options you can scale it if you want to
7:53
increase the size of this GIF
7:57
animation let's suppose you want to make
7:59
make
8:00
it the resolution of the give file to be
8:03
larger then you can set it to
8:05
100% in the scale property so the size
8:09
res resolution will be much
8:12
higher so the size of the GIF animation
8:15
will be higher because the resolution is
8:22
higher so the FPS you can even control
8:24
the FPS change the F FPS as well
8:31
so this is actually the editor guys if
8:34
you are interested the link is given in
8:35
the
8:36
description and you can purchase the
8:38
full source code and a very handy
8:40
feature is also available guys if you
8:43
want to load a specific YouTube video
8:46
that you have if you want to do editing
8:49
related to YouTube video let suppose
8:51
this is my video that I want to load we
8:53
need to copy link address and right here
8:56
you can select the YouTube video option
8:58
and the YouTube video will will be
9:01
embedded if you click the get video data
9:04
so it will actually embed that YouTube
9:06
video live stream of YouTube in this
9:10
this is my YouTube video we will look at
9:12
b a tool
9:14
that which
9:16
is.com or set it you can trim the videos
9:19
YouTube videos and save it so it's a
9:21
very handy feature guys which allows you
9:23
to do this in various you can see that
9:26
so this is actually the thing it's a
9:29
fully flash editor which is actually
9:30
coded inside next CHS and this is
9:33
actually the project code if you are
9:35
interested the link is given in the
9:37
description you can purchase this full
9:39
video editor from my website proot
9:43
store.com after payment you will be
9:45
redirected to Google Drive where you can
9:48
actually uh download the zip file and
9:50
then you just need to extract that zip
9:52
file and simply execute this command
9:55
here I'm just uh npm run Dev so this
9:58
will run this application on a local
10:01
development environment which is start
10:03
this application on Local Host 3000 it
10:06
will actually compile your application
10:08
and if you refresh it will start this
10:10
application at Local Host 3000 and then
10:13
you can either import YouTube video or
10:15
you can load your own local video as
10:17
well so this is actual option guys you
10:20
can see how awesome this is application
10:22
you can trim your videos change the
10:24
quality scale change the speed as well
10:27
and if you want to crop the video you
10:29
can convert this into various sizes if
10:31
you want to convert into a
10:34
square let's
10:39
suppose click on convert so this will be
10:42
converted into a square we have cropped
10:45
the
10:48
video so you can see that the video is
10:50
successfully cropped we have various
10:53
options right here wi if you want to be
10:56
wide here click on convert the GIF
10:58
animation will be
11:01
wide so it also shows you the progress
11:04
by you will see that it will become
11:06
something like this you can control all
11:08
these options you can also modify this
11:10
source code as well after purchase you
11:13
will get full commercial right to
11:14
actually modify this source code or also
11:16
enhance it to actually modify it add
11:20
some more features as well if you are a
11:22
student if you want to apply for a job
11:24
this will be a very good application to
11:26
actually show to your client that you
11:29
have made this application so I think it
11:32
will be a very good
11:38
application you can see that it makes it
11:41
very much easy to actually trim your
11:43
video
11:49
files you can basically select any
11:51
format here let's suppose if you want to
11:54
extract audio from the video you can
11:57
also convert this into MP4 LV all the
12:00
formats are supported you can trim your
12:03
trim the
12:04
files select your favorite format and
12:07
simply do the processing it's a very
12:09
fully flash single page application
12:11
which is there in next years using fmpg
12:14
web assembly Library
12:29
so if you do this basically it will show
12:32
you this progress bar as
12:35
well once it is
12:38
completed it will actually show you this
12:41
uh live preview of the output video as
12:56
well you can just control it the
12:59
starting duration and the ending
13:01
duration and convert this into FLV let's
13:05
suppose
13:07
convert it is doing its
13:09
process so it will show you the live
13:12
progress bar of how much progress it has
13:15
made right here and once it is completed
13:18
it will actually show you the live
13:19
preview of the output video as well
13:23
so by default I will select MP4 because
13:27
MP4 videos works pretty pretty
13:43
well you can see that it works with all
13:46
the options so I will highly suggest
13:49
that you select MP4 because uh MP4 is
13:52
widely accepted so all these options
13:54
will be acceptable if you change these
13:56
options you just need to just output
13:59
extension must be MP4 just try out with
14:02
different uh formats if it is supported
14:04
or not but MP4 is widely supported so if
14:07
you change these options it will work so
14:10
if you now want to decrease the size as
14:12
well click on convert so the video will
14:14
be much
14:17
smaller so you just need to select your
14:23
size very carefully so you can adjust
14:27
the quality adjust the FPS as well
14:30
so by default it is set to 30 you can
14:32
increase it to decrease the FPS as well
14:37
by let's suppose I want the fps to be
14:53
five so you can try out guys uh the most
14:57
exciting feature is the YouTube video of
14:59
option feature guys you can load any
15:01
YouTube video from the URL that's the
15:03
most exciting feature in this uh project
15:08
so as I already told you simply plug the
15:10
URL and uh you will find this feature to
15:12
be very useful uh hello guys welcome to
15:15
this live stream so that's the most
15:18
exciting feature that you should
15:20
purchase this product and uh you can see
15:23
that so if you are interested guys you
15:25
will actually get this full project code
15:28
and let me show you actually the
15:29
dependencies that we have used for this
15:31
project fmpg web assembly Library we
15:33
have used then we have used the exos for
15:36
actually requesting YouTube API for
15:39
actually fetching that YouTube video
15:41
then we have used fmpg JS and next JS we
15:44
are using 14 version it is compatible
15:46
with all the versions so don't don't
15:48
need to worry about if it is work with
15:50
older versions it will work with every
15:52
version then we are using stream to
15:56
blob ytdl core we are also using using
16:00
it so it's a fully fleshed project and
16:03
if you want to deploy this onto a real
16:05
domain name this next ch's application
16:07
there is a command which is available
16:09
just run it npm run build this will
16:12
actually make this build folder uh next
16:15
folder it will actually bundle all your
16:18
project code into a minified code so
16:22
that you can deploy your next year's
16:24
application onto a real domain name and
16:27
uh you you can deploy your application
16:30
simply run this command and it will
16:32
Minify all the things into a this folder
16:35
next folder so now you can deploy this
16:37
application onto a VPS server in digital
16:41
Ocean or versal application all many
16:44
platforms are there for hosting next
16:48
year's application so if you are
16:51
interested guys in this project tell me
16:54
if you are interested the link is given
16:56
and if you have face any problem after
16:59
is I will support you at my email
17:00
address and phone number and uh thank
17:04
you very much for watching this video
17:06
and coming back slightly to the quod
17:08
site as well if you see this is actually
17:11
the all the sizes here we are doing it
17:14
it's a fully flesh project written in
17:16
typescript you will see that typescript
17:18
is the superscript of JavaScript and all
17:22
this code is modifiable you can modify
17:24
this code fit to according to your needs
17:27
once you purchase it you can hire
17:29
developer to extend this functionality
17:31
as well or if you are a developer then
17:34
you can even modify this application
17:36
according to your own needs so this is
17:38
the index. TSX file and this is the
17:42
public folder where we are actually
17:44
storing all the libraries fmpg web
17:47
assembly Library fmpg core worker JS so
17:50
all these libraries are stored in the
17:52
public folder and then in the source
17:54
folder we have different components this
17:56
is actual button component this this is
17:59
for cropping the video this is for the
18:01
section this is for the typography and
18:04
these are the actual Library the Clipper
18:07
convert to you'll download video you'll
18:09
see that transcoding video so this
18:13
component is responsible for actually
18:15
downloading the output video this is the
18:19
types here utils this is actually the
18:22
worker here you will see
18:24
that so it's a fully flesh prod this is
18:28
the global CS is Tailwind we also using
18:30
Tailwind for styling purposes and this
18:33
is our next config file and this is
18:35
actually package.json so all in all guys
18:38
it's a very good project you should
18:40
definitely invest time and purchase it
18:42
and you will get to know about this
18:45
Library fmpg web assembly which allows
18:47
you to actually execute fmpg right in
18:50
your browser using the help of web
18:52
assembly and this is their official
18:54
website this is actual Source package
18:57
that we are using in the project you can
18:58
read more about it inside their official
19:01
website and read the documentation uh
19:04
it's a very powerful library to actually
19:06
make these awesome little video editors
19:09
right in the browser itself before that
19:12
it was not possible to make one so it's
19:15
a fully fles application and thank you
19:17
very much for watching this video and I
19:19
will be seeing you in the next one
#Flash-Based Entertainment
#Online Media
#Online Video
#Multimedia Software
#Clip Art & Animated GIFs
#Photo & Video Sharing
#Video Sharing