0:01
Uh hello guys in this live stream I will
0:04
show you how to build an offline video
0:06
cutter and editor in Vue.js3 using
0:09
FFMPPG web assembly library and for this
0:13
purpose I have developed this tool and
0:15
deployed this on my website and also
0:17
given the demo link in the description
0:19
of the video. So check the full
0:20
description and once you land on this
0:23
page it doesn't have a back end. It's
0:25
just a single page static offline editor
0:29
where you simply select your video file
0:32
to cut and trim. As soon as you select
0:34
the video, the video will load and then
0:37
using these sliders that you have the
0:39
starting trim, ending trim. You
0:41
basically select the time period that
0:44
you want to trim out or cut. This is a
0:46
starting and the ending duration. So now
0:49
we have the button. As soon as you click
0:51
the button, the processing will happen
0:52
directly in the browser.
0:54
And the video is cut and now you can
0:57
play the video and even download the
1:00
video as well. So it's very simple
1:03
and it's using the ffmpg library which
1:07
is a very famous library for in the
1:10
command line. But this solution fmpp web
1:13
assembly allow you to use this library
1:15
directly in the browser. So we are
1:20
exactly using this inside our Vue.js JS
1:23
project and I have also given the link
1:26
to purchase the source code. So this we
1:29
are using Vue3 and we are also using
1:32
FFMPG web assembly library. So this is a
1:35
complete offline video editor. So once
1:37
you purchase the source code this is a
1:39
directory structure. Each component is
1:42
divided into its own view file. You can
1:45
see all these components are there. So
1:47
now to run this project it's very
1:49
simple. you run the command npm rundef.
1:52
So this will start the local development
1:54
server at localhost 5173.
2:00
it's very simple. So we are also running
2:02
it locally as well. So as you can see
2:05
this is the same application. It's
2:07
really fast as well because no server
2:10
back end is there. All the processing
2:12
happens directly in the browser.
2:15
So it's a single page application. So
2:18
the processing is also very fast
2:21
because we are not re-encoding the
2:23
video. We are simply cutting and
2:25
trimming the portion. So this will also
2:28
save you a lot of time because many a
2:30
times you do need to cut your videos. So
2:34
interface is very simple. You simply
2:38
and using these sliders you cut and trim
2:40
the video. So this is a complete
2:42
solution offline base video editor
2:45
directly in the browser in Vue.js. JS3
2:48
using FMPG web assembly library. So if
2:52
you willing to purchase it, the link is
2:54
given in the description. So but before
2:56
that you can try this demo. It's also
3:00
given in the description.
