Up next in 10
Build a Browser Video Editor with Vue & FFmpeg.wasm — Fast Clip Cutting & Trimming in Browser
Mar 5, 2026
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-a-browser-video-editor-with-vue-ffmpeg-wasm-fast-clip-cutting-trimming-in-browser/
Live Demo of App:
https://freemediatools.com/videocutter/
Show More Show Less View Video Transcript
0:00
Guys, in this video I will show you a
0:02
Vue.js uh browser video editor that I
0:05
developed. So which lets you allow to
0:08
edit and trim your videos directly in
0:10
the browser. So this is the demo link.
0:12
I've given the demo link in the
0:13
description of the video. So check the
0:15
full description. So right here whenever
0:17
you land on this uh you basically have
0:20
the capability to uh choose a video
0:23
file. All extensions are supported. As
0:25
soon as you choose the video file using
0:28
these sliders, you can actually trim out
0:30
whatever portion of the video. You
0:32
select the starting duration and then
0:34
you select the ending duration. So now
0:36
let's suppose I want to trim out this
0:38
portion
0:40
and you have this button here. So as
0:41
soon as I click this button, the
0:43
processing will happen directly in the
0:45
browser. We are using FMPG web assembly
0:48
library in Vue.js. So now your output
0:50
file is
0:52
successfully trimmed here.
1:08
So now your output file is successfully
1:10
trimmed here. As you can see this is the
1:11
ffmppg web assembly Vue.js
1:15
video trimmer editor which is developed
1:17
in the browser. So the demo link is
1:19
given in the description of the video.
1:21
So this is the overall project in
1:23
Vue.js. JS if I show you the source code
1:26
you can also purchase the full source
1:28
code the link is given in the
1:29
description of the video. So after you
1:31
purchase it you will get this directory
1:33
structure. So as you can see we are
1:36
using FMPPG web assembly library and
1:38
also view3. So every component is
1:42
divided into its view file. So now to
1:44
run this project it's very simple. You
1:47
basically run the command npm rundev. So
1:50
this will start the development server
1:52
at localhost 5173.
1:55
So if I show you now I am running this
1:58
project locally here. If you see this is
2:00
the same project. So this is a single
2:03
page application. Uh
2:05
now again you choose the video file.
2:07
Again the video will load and here you
2:09
simply select the duration, the starting
2:12
duration and the ending duration.
2:15
Click on trim video and now the
2:18
processing will happen.
2:20
And then you can download the video here
2:22
by clicking.
2:26
So this is entirely built inside FMPG
2:31
web assembly. If you don't know about
2:33
this, it lets you allow fMPPG directly
2:35
in the browser. So we are using this
2:38
library alongside with Vue.js
2:41
to build out this complete video editor
2:45
where you can cut and trim your videos
2:47
directly in the browser. It's a browser
2:49
based solution. So if you like this
2:51
project then you can purchase it.
2:54
So once you get the source code you will
2:56
see this is the overall source code in
2:58
Vue.js. We have all these components
3:01
which are there.
3:05
So it's a complete solution for building
3:08
out this video trimmer cutter directly
3:10
in the browser. So definitely check out
3:12
this