Build a FFMPEG WASM Timeline Video Trimmer or Cutter Editor in Browser Using HTML & JavaScript
0 views
Jun 24, 2025
Buy the full source code of application here: https://procodestore.com/index.php/product/build-a-ffmpeg-wasm-timeline-video-trimmer-or-cutter-editor-in-browser-using-html-javascript/ 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/
View Video Transcript
0:03
uh hello guys welcome to this video so
0:05
in this video I will show you uh a tool
0:08
that I developed inside
0:10
freemediatools.com uh this tool allows
0:12
you to trim or cut your videos directly
0:15
in the browser it's a video trimmer uh
0:18
full editor timeline kind of an editor
0:21
where you can actually edit your video
0:23
files you can trim out unnecessary
0:26
portion of your video file directly in
0:28
the browser you don't require any video
0:30
editor installed on your computer so
0:34
this is the actual tool which looks like
0:36
this i deployed this on my website
0:38
freemediatools.com
0:40
and here you will select your video file
0:42
that you want to trim specific portion
0:46
so
0:47
whatever is your video file so let me
0:49
select
0:53
the video here so you can select here
1:01
the video here
1:03
and the live preview of the video will
1:05
show in the video player and here you
1:07
can control this using the timeline that
1:10
it constructs automatically right here
1:12
at the bottom position you will see
1:15
using this timeline it becomes very much
1:17
easy to trim out specific parts of the
1:19
video so this is the same timeline that
1:22
you see inside modern video editors so
1:26
now using this timeline you can see it
1:29
will automatically update it will show
1:31
you the starting and the ending duration
1:35
and the total amount of duration that
1:37
you want to trim out which is 22 seconds
1:40
it's starting from this 26th second it's
1:43
going until 49 seconds so this is the
1:45
actual video part that I want to trim
1:47
out so we have a bunch of buttons right
1:49
here we can preview the trim or we can
1:53
trim and download as soon as you click
1:55
this button the trimming will start and
1:57
instantly on the right hand side you
1:59
will see the output video which is 22
2:02
second long and now you can play the
2:04
output video which is actually trimmed
2:06
out the output image and then we have
2:08
two buttons right here either so it will
2:10
save you a lot of time guys because
2:13
sometimes in many of the situations you
2:15
want to trim out specific parts of the
2:18
videos so you don't need to require any
2:20
third party video uh desktop editor
2:23
installed on your computer you can
2:25
directly use my tool which is free media
2:27
tools.com video trimmer editor you
2:30
basically come to this tool you select
2:32
your video file that you want to edit
2:35
and the video will play right here this
2:37
is your input file and using this
2:39
timeline that you see you can trim out
2:41
specific portion
2:44
and then click trim and download and
2:47
instantly using FMPG web assembly it
2:50
trims out the video so this tool is
2:53
built entirely inside HTML CSS and
2:55
JavaScript and uh if you need the full
2:59
source code of this application the link
3:01
is given in the description and once you
3:03
purchase the source code you will be
3:05
automatically be redirected to Google
3:07
Drive where you will get actually get a
3:09
zip file which will uh have this
3:12
directory structure and inside this UMD
3:16
folder you will get all the executables
3:19
compiled of fMPPG web assembly which
3:23
makes it easy to use fmpp directly in
3:25
the browser and this is the single
3:28
index.html HTML file that you see which
3:31
is actually your code here which
3:34
contains HTML CSS and JavaScript it's
3:37
almost 492 lines of code here so it's a
3:41
single file in this project no
3:43
serverside code is involved it's a
3:45
static application so once you get this
3:47
source code you can directly run this
3:49
locally here so you can see now we are
3:52
running it locally again you repeat the
3:54
process you select the video that you
3:56
want to trim out uh using this timeline
4:00
you simply select the portion that you
4:02
want to edit and trim out again click
4:05
trim and download and instantly your
4:08
video will be trimmed and it will be
4:10
displayed on the right hand side now you
4:12
can play the video here two faces and
4:14
now to download this it's very easy you
4:16
simply click the download button that is
4:19
appearing right at the bottom position
4:22
and simply click the
4:25
download button to download the output
4:26
video will show an image that easy here
4:29
two faces you can try this tool it's
4:31
very user friendly tool very easy to use
4:35
and before purchasing it at the checkout
4:38
page I've given this demo link you can
4:40
try this tool before purchasing it if
4:42
you like it then you can purchase it and
4:45
it's a very good tool to see how I coded
4:48
this you can modify the source code or
4:50
add additional features as well so it's
4:53
very important to see how to construct
4:56
realtime application ations using this
4:58
ffmpg web assembly tool here which lets
5:01
you use ffmpg directly in the browser if
5:04
you don't know ffmppg is a command line
5:07
processing library originally built for
5:10
command line purpose but you can even
5:14
use it directly in the browser as well
5:16
so we are using this to construct this
5:19
ultimate video trimmer to cut your
5:22
videos directly in the browser so if you
5:24
are interested the link is given in the
5:26
description and thank you very much for
5:28
watching this and I will be seeing you
5:31
in the next live stream