live_tv
Livestream Starting Soon
00
Hours
:
00
Minutes
:
00
Seconds
Up next in 10
Build a Vue.js Video Cutter & Trimmer Editor Using FFMPEG WASM in Browser Using Javascript
Jan 9, 2025
Buy the full source code of the application here:
https://procodestore.com/index.php/product/build-a-vue-js-video-cutter-trimmer-editor-using-ffmpeg-wasm-in-browser-using-javascript/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:02
uh hello guys welcome to this live
0:04
stream so in this live stream I will
0:06
basically show you a application uh
0:08
video editor that I developed using
0:11
vuejs and I deployed this on my website
0:13
free media tools slide cutter you can
0:16
check out the live demo I have
0:18
also uh you can see this is actually the
0:20
application and uh it is built using
0:23
fmpg web assembly library and we have
0:26
used vue.js for this so This is actually
0:28
the vuejs code that you see right here
0:30
this is the actual directory structure
0:32
we have various components here which is
0:34
the slider component which is video
0:37
video input component and video trimmer
0:39
component which actually cut your videos
0:42
here you need to actually select your
0:44
video file all extensions are supported
0:46
MP4 Avi mov so I will simply select my
0:50
file right
0:51
here so you can select any file here
0:55
let's suppose I select this file so it's
0:57
a 14c video and then then we have this
1:01
two sliders which are there for actually
1:03
selecting the starting time and the
1:04
ending time this makes it very much easy
1:07
to actually carry out the cutting
1:09
cutting process of the video which
1:12
portion that you want to trim so simply
1:15
you can select whichever portion that
1:17
you want to select here let's suppose I
1:20
want to trim the portion from the 4th
1:22
second to the 8th second click on trame
1:24
video so the processing will be done by
1:27
fmpg web assembly library and now you
1:29
can see that your video has been
1:31
successfully cut from this duration 4th
1:34
second to 8 second you can see that now
1:37
it has you can simply download the video
1:39
you can even play this video as
1:42
well and just click the download button
1:45
to actually download the video as an
1:47
attachment and now you can play this
1:49
file in the video
1:51
player so in this way you can directly
1:54
cut your videos you can go to this V
1:56
link free media tools my website is
1:59
there
2:00
if you go to it a latest tool that I
2:02
added so if you go to the dro video
2:05
cutter editor this is actual tool I
2:08
deployed this vuejs application first of
2:10
all I deployed this I created this disc
2:12
folder and simply just uh deployed this
2:16
minified code this is a JavaScript
2:18
minified code CSS minified code so this
2:21
is actual vuejs application I'm running
2:24
it on Local Host
2:25
5173 so you will basically see right
2:28
here the command is very simple npm run
2:31
Dev this will start your development
2:34
vuejs server on Local Host 5173 you will
2:37
see that your application is running on
2:40
HTTP Local Host
2:42
5173 so if you reload again you need to
2:45
choose the video file Whatever video
2:47
file that you want to choose right
2:49
here so the video file is selected you
2:52
can
2:54
just provide the starting time and the
2:56
ending time so I need to trim this for
2:59
question from 6 second to 13 second so
3:02
processing it's really fast guys it's
3:04
really effective you can see it's a
3:06
single page video trimmer editor you
3:08
don't need to install any third party
3:10
software it really works in the browser
3:13
and it cuts cut your video the user
3:16
interface is really very easy you just
3:18
need to change it you can see that
3:21
whatever portion trim video and now you
3:23
can
3:24
see just refresh
3:29
so the interface is very simple just
3:32
need to provide starting duration and
3:34
the ending duration click on trim video
3:36
all the processing is doing it in the
3:38
background if you go to the console you
3:40
can see fmpg web assembly library is
3:43
first of all downloaded from this link
3:46
and it is doing its process in the
3:48
background you can see it is cutting
3:49
this video and once it is done it is
3:52
showing the output video in the output
3:54
video player right here you can play
3:55
this output video you can see that so
3:59
this this is actually the application
4:01
that I developed in vuejs coming back to
4:03
the code if you need the full source
4:05
code the link is given you can directly
4:06
purchase it so once you purchase it from
4:09
my proc Cod store.com website you will
4:12
actually get a zip file from Google
4:15
Drive automatically after the payment so
4:17
you just need to extract the zip file
4:20
and in that zip file all the source code
4:22
all the directory structure will be
4:24
present and what you need to do after
4:27
you extract it you just need to run this
4:30
command npm run Dev this will actually
4:32
run this development command which is
4:34
present inside package.json so Dev it
4:37
will start your V server which will
4:39
actually start your vuejs server on
4:42
Local Host
4:44
5173 and now I will also show you let me
4:47
delete this disc folder if you want to
4:49
deploy this application onto a real
4:51
domain name let's suppose you purchase a
4:53
domain name and you want to deploy this
4:56
application online you can easily do
4:58
this by using the build command which is
5:00
the second command available npm run
5:04
build so just notice on the left hand
5:06
side as I run this command a disc folder
5:09
will be created just holding your static
5:11
minified code CSS and JavaScript code
5:14
and now you can actually uh deploy this
5:18
application by just uploading this
5:20
folder to your shared hosting plan and
5:22
simply this is your index. HTML and this
5:25
is your assets folder holding the
5:27
minified JavaScript and the CSS code for
5:30
so you can simply deploy this video
5:32
editor right in the browser itself
5:34
purchasing a domain name and putting
5:36
advertisements and earning money as well
5:39
so it's a really good application coming
5:41
back to the code uh if you see we have
5:44
various components for the slider which
5:46
is a view component we have various CSS
5:48
code as well this is a video input
5:51
component video trimmer component if you
5:53
see so here we are requiring the create
5:55
fmpg library and if you go to
5:58
package.json we are using using this
6:00
fmpg web assembly Library if you don't
6:02
know about fmpg Library it's a open-
6:05
source library for video and audio
6:07
processing it's a completely
6:09
crossplatform solution for command line
6:11
but for executing fmpg library in the
6:14
browser we are using fmpg web assembly
6:16
Library it is actually a technique by
6:19
which we actually use fmpg library in
6:21
the browser using web Assembly Language
6:24
this is their official website you can
6:26
read more about the documentation
6:28
various methods that I used so we are
6:30
actually using it as a base library to
6:32
for our vuejs video editor and trimmer
6:35
using in the browser it's a complete
6:38
solution if you're watching it for the
6:40
very first time please hit that like
6:41
button subscribe the channel as well
6:45
so inside your V.C config.js file guys
6:49
you will see that we are actually adding
6:51
these two headers which are really
6:53
important if you uh see these headers
6:57
are really important if you don't add
6:58
these headers if you try to run this
7:00
application if I delete these headers
7:02
and try to run this application so what
7:04
will happen you will famously get this
7:07
error in the browser shared buffer is
7:10
not defined shared array buffer is not
7:13
defined if you choose the video file
7:15
let's
7:18
suppose the video file will get
7:24
loaded so the processing will not take
7:27
place you will go to the console and you
7:30
will basically find out this array this
7:32
error which is shared array buffer is
7:34
not defined so in many cases when
7:37
whenever you are working with the fmpg
7:39
web assembly Library this error will
7:41
take place if you just search for this
7:43
error in stack Overflow you just need to
7:46
add these two headers which is cross
7:49
origin opener policy same origin and
7:51
cross origin embedder policy so these
7:54
two headers we do need to add inside our
7:57
v config.js file inside the server block
8:00
so just add these two headers this is
8:03
really important if you don't add this
8:04
you will get that shared ARR buffer is
8:06
not defined so that's why I added
8:10
automatically for you so you don't need
8:12
to add it manually after the payment you
8:14
will it will automatically get added so
8:17
now you can run your application trim
8:19
your videos right in the browser itself
8:22
you can see that it's really fast
8:24
blazingly fast and it don't require any
8:29
desktop video editor software you can
8:31
directly run it in the browser and
8:34
before you purchase gu you can actually
8:36
test out my tool which has deployed this
8:39
video cutter editor before you purchase
8:41
it you can actually try it if it works
8:43
or not for you and then you can purchase
8:47
it the link is given in the description
8:49
you can use my proc Cod store.com
8:51
website to actually purchase it
8:55
and and you will see that we have
8:57
various components this is actual
9:02
app component this is a video trimmer
9:05
component you can see various components
9:08
are there slider component video input
9:10
component all these components are
9:13
there so you will get all this source
9:16
code once you purchase it the link is
9:19
given in the
9:21
description so if you are interested
9:24
guys you can definitely purchase it and
9:27
if you are watching it for the very
9:28
first time then please hit that like
9:30
button subscribe the channel as well and
9:33
please share this video with your
9:34
friends as well and you can just see how
9:38
easy it is once you deploy this you can
9:44
simply cuts the
9:47
video based upon the starting time and
9:50
the ending
9:51
time and there is a trim video option
9:55
and the video has been successfully
9:57
trimmed
10:00
so you can take uh the size is not a
10:04
restriction you can take as many length
10:06
of videos can take hour length video as
10:10
well and trim it it's
10:13
very it will work
10:17
also
10:20
so it's a good solution you can see
10:25
that so if you interested guys the link
10:27
is given in the description
10:30
and I will be seeing you in the next
10:32
video
#Flash-Based Entertainment
#Online Video
#Software
#Multimedia Software
#Video Sharing