Up next in 10
Buy the full source code of the application here:
https://procodestore.com/index.php/product/php-ffmpeg-script-to-change-speed-of-gif-animation-using-html5-form-in-browser/
Show More Show Less View Video Transcript
0:03
Uh hello friends, today in this uh
0:05
tutorial I will be showing you that how
0:07
basically you can build out a very basic
0:09
application using PHP and ffmppg where
0:13
you will be able to increase or decrease
0:16
the speed of a GIF animation. GIF as you
0:19
all know guys it's a special kind of
0:21
animation image which runs for a period
0:24
of time and then it repeats
0:26
indefinitely. So we will try to increase
0:28
or decrease the speed of GIF animation
0:30
where user will provide the input. Let
0:32
me show you the demo of this
0:34
application. So basically guys this is a
0:36
demo of the application. You will see on
0:38
your screen this is the interface. We
0:40
have a choose file button and as I click
0:43
the choose file button I will be able to
0:46
select my GIF file. So let's suppose I
0:49
select this GIF file guys. If I open
0:52
this,
0:53
this is the original GIF file. We will
0:55
select guys. we will try to increase or
0:57
decrease the speed of this uh GIF file.
1:01
So let me select this GIF file. So
1:05
So let me select this guys. As I select
1:07
this, so we have this slider.
1:11
So if I basically increase the slider
1:14
guys, it will have a reverse effect. If
1:16
I increase the slider, the speed of the
1:19
GIF animation will decrease. And if I
1:22
just provide a low number here, the GIF
1:26
animation speed will be larger. So now
1:28
if I basically provide this value, click
1:30
download GIF. Now the command will run
1:33
in the background. And now you will see
1:35
as you can see the GIF file has been
1:37
downloaded successfully. If I open this
1:40
file, you will see how fast the GIF
1:43
animation is running right here. You
1:45
will see that. So the we have increased
1:47
the speed of GIF animation. And in
1:50
reverse if I want to basically decrease
1:52
the GIF animation speed here what I can
1:54
do I can simply increase the value right
1:57
here. So this will have a negative
1:59
effect and it will basically decrease
2:01
the speed. If I now click download GIF
2:04
and also you will see the size of the
2:06
GIF will also increase because now you
2:09
will see that guys the GIF animation
2:11
speed is uh
2:14
decreased very much decreased here. You
2:16
will see that the GIF animation is
2:18
decreased here. You will see that.
2:23
So it is very much decreased. So in this
2:25
way guys, you can pick any file. Let's
2:28
suppose if I pick this file.
2:31
This is original speed of the GIF file.
2:33
Now we want to tweak it. Let's suppose
2:36
if I want to again increase it more.
2:41
So now you can see that
2:43
this is very much increased the speed of
2:45
the GIF file. So now if I want to
2:47
decrease I can increase the slider here
2:49
like this. Click download. So now once
2:52
again the file will be downloaded. So
2:54
now this will be very slow. You will see
2:56
that this will be very slow.
3:00
So we are basically using the FFMPG
3:03
library for doing this task. Guys, as
3:06
you all know, FFmpg is a open-source
3:09
library. So, it has its own website
3:12
ffmpg.org.
3:15
So, it's a complete cross-platform
3:17
solution for converting and streaming
3:19
audio and video. So, we will be using
3:21
this library. So,
3:25
in our PHP script. So, let's start
3:27
building this PHP spirit script. Guys,
3:29
the link is given in the description of
3:31
the live stream. If you want the full
3:32
source code, you can go to the
3:34
description and uh you can get all the
3:37
source code. So first of all guys, what
3:38
we will do? We will create a basic
3:41
index.html file here
3:45
and here we will hold the form. So
3:48
inside the form guys we are using some
3:51
bootstrap as well here. So after the
3:54
title just include the CDN for bootstrap
3:57
and we will be giving the container
3:59
class and here we will say in the center
4:01
position
4:03
give speed changer.
4:10
So you will see that guys we have uh
4:14
included the CDN for bootstrap. You will
4:18
see that this is a bootstrap CDN that
4:20
you need to include. And after that guys
4:23
what we need to do
4:25
we will have a simple form
4:29
the action will be going to the separate
4:33
file of PHP process dot PHP method will
4:36
be post and encoding type will be
4:38
multiart form data so inside this guys
4:42
we will have form group class of
4:44
bootstrap
4:46
and here we will be allowing the user to
4:48
select the gif file
4:54
So input type file and we will only be
4:56
accepting give files
4:59
we will be giving a class to it form
5:02
control that's all. So if you just now
5:06
refresh guys application
5:09
just rename this file to process dot
5:12
php.
5:16
So now you will see guys give speed
5:18
changer we have this choose file button
5:20
and after that we will have a simple
5:23
submit button which will also we will
5:26
have a speed changer as well. So we will
5:29
have another form group.
5:33
Here we will able to select the speed of
5:35
the
5:38
so we will simply say input.
5:42
So this will be a range element guys. So
5:45
basically here we will be having input
5:47
type uh range and the id we will give it
5:52
as speed and minimum value will be 0.1
5:56
and maximum value will be five and step
5:59
will be it will be increased by 0.1 and
6:03
uh the default value will be 1
6:08
that's all and we will also be giving a
6:12
form control
6:14
plus class for bootstrap.
6:17
So you will see that guys now we have
6:20
the range as well. So either we can
6:22
increase or decrease. Lastly we need a
6:25
button guys right here to submit the
6:27
form. So we will be giving a bootstrap
6:31
class of btn btn danger
6:34
and uh this button will be of type
6:36
submit
6:38
and here you will simply say download
6:44
and uh
6:54
so you will see that sorry this is
6:57
basically the code that we written guys.
6:59
I think if you missed it, we have give
7:02
speed changer. We have the actual form
7:04
here.
7:08
It will go to process.php method is post
7:11
encoding type multiart form data. Then
7:14
we have uh the div tag where we will
7:17
allow the user to select the GIF and
7:19
then we are accepting only GIF here. And
7:22
then we have select have the range
7:24
element where we allow the user to pick
7:28
the speed. And then we have a button.
7:32
This is the HTML code guys. And after
7:35
that what we need to do? We need to now
7:38
write the process.php code. So this is
7:41
the actual PHP code that we need to
7:43
write guys. And uh
7:47
here we will have uh a if condition
7:54
and uh
7:56
we will have uh the server.
8:06
This is request method. And basically
8:09
here we will check if
8:13
if the method is posted. In that in this
8:16
case we will first of all
8:22
uh basically upload the file. So we will
8:26
allow
8:27
we'll say
8:29
the file will be uploaded in the uploads
8:31
directory. So just create a uploads
8:33
directory guys. right here put a
8:35
semicolon
8:38
and then we will provide the GIF path.
8:41
So this will be uploads
8:49
uploads directory and then base name we
8:52
will use it to concatenate the name of
8:55
the file. So this is stored inside the
8:57
files array. Files GIF and name.
9:03
So for this guys you need to give I
9:07
think the name attribute. If you haven't
9:09
given the name attribute just go to
9:12
index html. For this you need to give
9:14
the name attribute. I haven't given it.
9:17
Just give it a name attribute gif. So
9:20
this needs to be the same here. You will
9:22
see that. So after we provide the gif
9:25
path now we need to simply also provide
9:29
the output path where the output file
9:32
will be created. So it will be dynamic
9:35
file name modify dotg.
9:40
So what we need to do guys first of all
9:42
we need to upload the file. So for
9:45
uploading the file we have a function in
9:47
PHP which is move uploaded file. And
9:51
here we will simply say dollar
9:54
files and give
9:57
in the temporary location we have temp
10:00
name. This is a temporary location guys.
10:02
We need to move this temporary location
10:04
to the current location which is give
10:07
path.
10:09
This will actually upload the file guys.
10:11
So what you will see if I select the
10:15
file here. Let's suppose if I select
10:17
this file,
10:21
click download GIF. So what should
10:23
happen? If you open uploads directory,
10:25
my file has been successfully uploaded.
10:28
So now after uploading the file guys, we
10:30
do need to change the speed. So what I
10:33
will do is that we will take the speed
10:35
in a variable. We will say dollar
10:41
post and then we will say that uh
10:46
speed. You'll take the speed here. For
10:49
this once again you need to give the
10:51
name attribute which is required.
10:55
So just go to your index.js. So just
10:58
give it a name attribute guys. Also
11:01
we forgot to add it.
11:05
So
11:08
just give it a name attribute.
11:11
This is speed.
11:13
So after we got the speed guys, what we
11:15
will execute ffmpg command. So for doing
11:19
this you will use the execute method.
11:23
Execute and then
11:29
this is actual command guys. So
11:34
I will write write this.
11:37
So
11:39
just see guys what is the command here.
11:41
Let me zoom in. ffmppg dash I followed
11:45
by the path of the GIF file and then we
11:47
are applying the video filter
11:53
you will see that.
11:57
So we are the you can see we are
11:59
applying this video filter which is set
12:01
points. This is the video filter we are
12:03
applying and then we are providing the
12:05
speed value multiplied by pts and then
12:09
followed by
12:14
the output path. So this is the actual
12:18
command guys. Now we need to execute
12:20
this command. So what we will say
12:21
execute ffmppg command. So this is a
12:25
function guys which will automatically
12:27
execute the command for us. So after
12:31
doing this we need to download the file.
12:34
So for downloading the file guys we need
12:36
to set some headers. So this header will
12:39
be content disposition
12:42
and uh
12:45
these headers need to be set guys
12:46
whenever you are
12:49
downloading the file as an attachment in
12:51
PHP.
12:53
So this is slightly complicated code.
12:56
The link will be given guys in the
12:58
description. So no no worry about it.
13:00
Let me write this and then explain you
13:02
what is happening. So we have set this
13:05
headers guys. You will see content
13:07
disposition attachment and content type.
13:10
This is me type image/gif.
13:14
So we are reading the file and then we
13:16
are deleting these files from the root
13:18
directory. That's all. So this is
13:21
basically the script guys. And after
13:23
this we select and now click download
13:28
GIF. So your file is downloaded and you
13:31
will see that the file the speed of the
13:33
GIF animation is very large very fast.
13:37
You will see that
13:39
if I want to make it slow I can change
13:42
this value and now you will see that it
13:46
will be very slow.
13:48
So in this way guys you will uh we saw
13:52
how we can basically increase or
13:54
decrease the speed of the GIF animation
13:56
using a pure uh ffmppg.
14:00
We executed ffmpg command here. So you
14:03
can basically create a tool website
14:06
using this concept
14:08
and thank you very much guys for
14:10
watching this video and I will be seeing
14:12
you in the next live stream.