0:00
Guys, in this video I will show you a
0:02
Vue.js uh browser video editor that I
0:04
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:40
We have this button here. So as soon as
0:42
I click this button, the processing will
0:44
happen directly in the browser. We are
0:46
using FMPG web assembly library in
0:48
Vue.js. So now your output 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:35
using ffmppg web assembly library and
1:38
also view3. So every component is
1:41
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: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 now again you
2:06
choose the video file. Again the video
2:08
will load and here you simply select the
2:11
duration the starting duration and the
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: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 ffmpg 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: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
