Up next in 10
Vue Video Cutter: FFmpeg WASM + JavaScript — Cut & Trim Videos Directly in the Browser
Mar 5, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/vue-video-cutter-ffmpeg-wasm-javascript-cut-trim-videos-directly-in-the-browser/
Live Demo of App:
https://freemediatools.com/videocutter/
Show More Show Less View Video Transcript
0:00
you a Vue.js video cutter and trimmer
0:04
video editor I developed in some
0:06
browser. I've given [snorts] the demo
0:07
link in the description of this video.
0:09
So check the full description and this
0:12
is the link here. So when you land on
0:14
this, this is a single page application
0:17
here. It lets you allow to choose any
0:19
sort of video. All extensions are
0:21
supported. So once you select the video,
0:24
the video will load. You can play the
0:26
video and the thing about this you have
0:29
sliders right here for trimming and
0:31
cutting the video. You can select the
0:33
starting duration and then you can
0:35
select the ending duration. So now we
0:37
have this button. So if you now want to
0:40
trim this click the trim video button
0:42
and instantly your video will be cut and
0:45
this is the output result and you can
0:48
click the download button. So
0:52
I have also given the link to purchase
0:53
the source code. So once you purchase
0:56
it, this will be the directory
0:57
structure. This is the overall structure
0:59
of the source code.
1:02
If I show you the package.json file, we
1:04
using Vue3 technology right here, the
1:08
framework. And uh then we have using
1:10
ffmpg web assembly library. So if you
1:14
don't know about ffmpg web assembly, it
1:16
lets you allow fmpp directly in the
1:19
browser. So we are using this alongside
1:22
inside our Vue.js JS3 project. Every
1:25
component is divided into its
1:27
appropriate Vue.js file, CSS and
1:30
JavaScript code. So it's very easy to
1:33
run this as well. I'm running locally as
1:36
well. And PM rundev. So this will start
1:39
this local development project at
1:41
localhost 5173.
1:43
And as you can see we are running it
1:45
locally as well. So again you repeat the
1:48
same process. Again you select the
1:50
video. The restriction on the size of
1:52
video is not there. You can select as
1:55
much long video as you can and this will
1:59
save you a lot of time as well for
2:01
trimming videos. You simply use the
2:04
these sliders and click on trim video
2:06
and instantly your video will be cut and
2:10
then you can download this. So it's a
2:13
single page application kind of a SAS
2:15
tool
2:19
>> software as a tool where user will come
2:21
to your tool website. They can trim and
2:25
cut the video.
2:27
So it's an overall Vue.js project video
2:30
cutter trimmer.
2:33
The link is given.
2:35
You can try out the demo before
2:37
purchasing it and if you like it then
2:39
you can purchase it. The link is given
2:41
in the description. So definitely check
2:43
out this uh readym made video editor,
2:46
video cutter and trimmer tool.