Up next in 10
Build a React.js FFMPEG WASM Timeline Video Cutter Editor in Browser Using TailwindCSS in TS
0 views
Jun 19, 2025
Buy the full source code of the application here: https://procodestore.com/index.php/product/build-a-react-js-ffmpeg-wasm-timeline-video-cutter-editor-in-browser-using-tailwindcss-in-ts/ Official Website: https://freemediatools.com
View Video Transcript
0:04
uh hello guys uh welcome to this live
0:07
stream so in this live stream I will
0:09
show you yet another reacts uh web
0:12
application that I developed inside the
0:15
browser it's a web
0:18
uh video trimmer kind of an application
0:21
where you can actually cut or trim your
0:23
videos using fmpp web assembly library
0:27
so the interface looks something like
0:29
this is we are running it on localhost
0:31
5173 and here you just need to select
0:34
your video file so there is no
0:36
serverside code involved it's a simple
0:38
static app which runs entirely in the
0:40
browser and as I select my video file
0:43
you will instantly see this will be the
0:45
timeline constructed automatically and
0:47
you will get these sliders where you can
0:50
control whichever duration of the video
0:53
that you want to trim out and it will
0:55
clearly show as you move the slider the
0:57
video will also get updated and You will
0:59
see this is your starting time this is
1:02
your ending time so let's suppose I want
1:05
to cut this duration from this starting
1:08
time and ending time i have this button
1:10
here of trim video and I will just click
1:14
this video uh button and you will get
1:15
this notification that your video is
1:17
trimmed successfully and as you can see
1:20
it's the application is really fast and
1:22
that's the advantage of using FFMPG web
1:25
assembly library you can play the video
1:28
here in the video player and then we
1:30
also have the download button to
1:32
actually download this video inside your
1:35
attachment so now you can play this
1:38
video inside your video player do is
1:40
that you should so this is a complete
1:44
project compatible with the latest
1:45
version if you need the source code of
1:47
this project the link is given in the
1:50
description you can go to my website
1:51
procodestore.com
1:53
and after you purchase the source code
1:55
you will get this zip file which will
1:58
contain this full directory structure
1:59
it's a full application all the
2:01
application is divided into multiple
2:04
components which are all coded inside
2:06
TypeScript and we are using the latest
2:08
version of React here you can see 18 and
2:11
we are using FMPG web assembly library
2:14
and if you don't know about fMPPG guys
2:17
it's an open-source uh audio and video
2:19
processing library it's completely
2:22
crossplatform but it's a command line
2:25
library so now to use it in the browser
2:28
we use this open-source package which is
2:31
ffmppg web assembly so we are using it
2:34
inside our application to execute ffmpg
2:37
directly in the browser so that as you
2:39
load your application you simply select
2:41
a video file and as soon as you
2:45
you have use these sliders and click on
2:48
trim video and instantly your video will
2:50
be trimmed so once you get the source
2:53
code guys you will be able to modify it
2:55
or add additional functionalities as
2:57
well so that's the important thing and
3:00
you will get to know about how I use
3:02
this ffmpg web assembly library to build
3:05
out this complete application so the
3:07
link is given in the description
3:09
definitely purchase the full source code
3:11
of this project and uh what now to run
3:14
this project it's very simple you first
3:16
of all npmi command this will install
3:19
all the NodeJS modules and create this
3:22
folder and then you simply say npm
3:25
rundev
3:27
so this will start the development
3:29
server and you can directly open this
3:32
application by typing localhost 5174 so
3:36
it's very simply the application will
3:38
load and now if you want to deploy this
3:41
it's very simple you say npm run build
3:44
this will build out all the static
3:46
assets and it will minify your
3:48
application building it for production
3:50
so it's very simple it will create this
3:53
disc directory
3:55
so definitely guys if you are interested
3:58
you can directly purchase the source
4:00
code the link is given in the
4:01
description and uh thank you very much
4:04
for watching this video and also check
4:08
out my website guys which is
4:09
freemediatools.com
4:12
uh which contains unlimited number of
4:14
tools regarding audio video and image
4:17
and I will be seeing you in the