[0:00] all right when you're making a website
[0:01] oftentimes you want to have some sort of
[0:03] video on your website maybe you want to
[0:05] have a video background for your home
[0:07] page that's very trendy
[0:09] or maybe you want to have some video
[0:10] showcasing your product that you want
[0:12] people to buy
[0:13] in any case adding a video to your
[0:15] website will make it look very nice
[0:17] but of course when you're adding a video
[0:18] you need to optimize it
[0:20] because this video right here well let
[0:23] me just show you what i have here i have
[0:25] a video called skyscrapers
[0:27] and is a very nice video of some
[0:29] skyscrapers going by
[0:30] that is a fine looking video but the
[0:33] problem with this is it is 27 megabytes
[0:35] and i don't know about you but
[0:37] i don't want my videos to have to
[0:39] download 27 megabytes of video just to
[0:41] see my home page and so in this video
[0:43] i'm going to show you how you can
[0:44] optimize this bring it down to a
[0:47] reasonable file size while still keeping
[0:49] the quality good because of course if
[0:51] you have a video on your website you
[0:53] want it to look nice that's the entire
[0:55] point and today we're going to achieve
[0:57] all this and more with this program
[0:59] called ffmpeg which you may have heard
[1:01] of before
[1:02] but it's going to be a command line
[1:04] application
[1:05] that you can install with your favorite
[1:08] package manager so
[1:10] it's going to be in all the official
[1:11] repositories so just pick whichever
[1:14] package manager that you're using
[1:16] it is as simple as that install that and
[1:18] once you have it installed
[1:20] i will show you how you can use it and
[1:23] the most basic usage will go something
[1:25] like this ffmpeg dash i and this is
[1:29] going to be your input file which
[1:31] we already said is skyscrapers.mp4
[1:34] and probably the most common
[1:36] optimization that you would like to make
[1:37] to some video is just to
[1:39] change the resolution so this video is
[1:42] originally 1440p
[1:44] and i'd like to get it down to 1080p so
[1:46] i want to make the resolution 1920 by
[1:48] 1080 pixels
[1:50] and we can do that by passing in this
[1:51] dash vf flag
[1:53] this is basically shorthand for saying
[1:55] uh add this filter and the filter that
[1:57] we're going to be adding to this is
[1:59] scale so we want the scale to be 1920
[2:03] that is going to be how many pixels
[2:04] across that i want this video to be
[2:06] and then you can also pass in the height
[2:08] here
[2:09] but to be honest you probably just want
[2:11] to keep the aspect ratio the same you
[2:13] don't want to have to do the math so you
[2:15] only really have to type in the width
[2:16] and then you type in
[2:18] dash 2 and this will automatically set
[2:20] the height based on the aspect ratio and
[2:23] the negative 2 is just saying that we
[2:24] want to keep the height
[2:27] even integer so we don't want it to be
[2:30] 1081 pixels
[2:32] in height we want to be 1080 pixels in
[2:34] height just because if it's an odd
[2:35] number you can run into some issues with
[2:37] some video players so that's the only
[2:39] reason i'm putting negative two instead
[2:41] of negative one and then you would just
[2:43] type the output file right here this is
[2:45] the file that we wanted to create so
[2:47] let's say we want to make output.mp4 and
[2:50] one more flag that you can optionally
[2:51] add in here is dash a n
[2:54] what this flag will do is it will remove
[2:55] all the audio information in this video
[2:58] file so for this specific video it
[3:00] doesn't have any audio and i don't want
[3:02] it to have any audio because
[3:04] let's say in this example i just wanted
[3:06] to be a background video of course it's
[3:07] not going to have any sound but even if
[3:09] your video doesn't have any sound then
[3:11] it may still have some audio information
[3:13] so dash and will just strip out all that
[3:16] information and no additional metadata
[3:18] or anything about audio so that will
[3:20] save you a little bit on your file size
[3:22] and let's just run this and see what
[3:24] happens now this will take a minute or
[3:26] two so
[3:27] i actually already ran this before the
[3:29] video so let's just see how it looks
[3:31] let's open up the file browser go to
[3:33] input
[3:34] and as you can see this 27 megabyte
[3:36] video has been
[3:37] reduced to 9.1 megabytes which is
[3:40] already a very nice savings but we can
[3:42] do better now there's a few different
[3:44] codecs that you can use whenever using
[3:46] ffmpeg
[3:48] and a video codec is basically what
[3:50] compresses the video down and there's
[3:52] different kinds of video codecs you can
[3:54] use some are more modern than others and
[3:56] some of them will be more efficient than
[3:58] others but the most common video codec
[4:00] for the web is going to be h264
[4:03] so in this command let's also add dash c
[4:06] colon v
[4:07] and this is shorthand for allowing us to
[4:09] select the codec and the default codec
[4:11] is going to be lib x 264
[4:14] and this is going to be the h.264 video
[4:18] codec and as you can see this is going
[4:19] to have the best compatibility with
[4:21] every single browser
[4:23] so almost every browser can support this
[4:25] just fine and so at the bare minimum you
[4:27] will want to have this format when
[4:29] putting your videos on the web and there
[4:30] are some other formats that i will show
[4:32] you for example h.265
[4:35] which is more modern but as you can see
[4:37] it has a lot less support it's actually
[4:39] only available in apple devices and
[4:42] there's one more that i'll show you vp9
[4:44] and this also has pretty good
[4:46] compatibility
[4:47] but there are a few browsers that it
[4:49] doesn't work in but let's start with
[4:51] h.264
[4:52] and so this is not going to have the
[4:54] best compression the file size is going
[4:56] to be a little bit bigger than other
[4:57] ones
[4:58] but this will be the fallback in case
[5:00] your users are using an old browser that
[5:02] doesn't support a newer codec so first
[5:05] things first let's just try this one so
[5:07] that's what this libx 264 is and then
[5:10] we'll also want to pass in the quality
[5:12] so we're going to type in dash crf and
[5:15] this is going to accept a number from 0
[5:17] to 51. 0 is going to be the best quality
[5:20] 51 is going to be the worst quality so
[5:22] we want something kind of in the middle
[5:24] there and so you can play around with
[5:25] this a little bit
[5:26] but for me personally something around
[5:29] 24 is going to be pretty good
[5:31] it the file size is not going to be too
[5:33] big and it's still going to be good
[5:34] quality so this is what i would
[5:36] recommend and finally let's just pass in
[5:38] one more option it's going to be dash
[5:41] mov flags
[5:43] and then fast start and this is
[5:45] basically just going to help your videos
[5:46] load faster for the web it will kind of
[5:48] push some information to the beginning
[5:50] of the video so whenever your users
[5:52] first start the video is going to load
[5:54] faster than if you didn't include this
[5:56] flag and we can go ahead and run this
[5:58] it'll take a couple of minutes
[6:00] but it will give you something
[6:02] like this so the other video was 9
[6:04] megabytes and we've gotten it down down
[6:06] to 7.7 megabytes
[6:09] that's already a lot better that is
[6:10] about a third of the file size of the
[6:12] original but of course we can do even
[6:14] better and so next up after h.264
[6:17] let's go over vp9 and so the vp9 codec
[6:21] can only be stored inside a webm video
[6:23] format it can't be used inside an mp4
[6:26] video format so we'll just be saving it
[6:28] as a webm file format that's not a big
[6:30] deal so we're going to change the codec
[6:32] to c
[6:33] v
[6:34] and then lib vpx
[6:37] dash vp9 that is going to get the vp9
[6:40] video codec which is going to be more
[6:42] optimized than the h.264 video codec and
[6:45] of course we'll pass in the same options
[6:47] here rescaling 1920.
[6:49] we can leave out the dash move flags
[6:51] fast start that's because with vp9 it's
[6:54] already going to be optimized for the
[6:55] web so you don't really need to add
[6:57] anything additional
[6:58] and of course you would just
[7:00] change the output to webm right here and
[7:03] finally we'll want to add dash crf
[7:05] like we did with the other one to set a
[7:07] quality for this one so this one is on a
[7:09] scale from 0 to 63 so we can change the
[7:12] quality a little bit so for me
[7:13] personally i use
[7:15] a crf of 40 for this one
[7:17] and at least for me visually it looks
[7:19] the same as the previous one
[7:21] so the quality is still there but let's
[7:23] run this and see what it looks like
[7:26] and so
[7:28] this one is going to be 7.7 megabytes
[7:30] but the command that we just ran is
[7:32] going to be only 3.8 megabytes so that's
[7:34] already a big savings
[7:36] and if we open this up the quality is
[7:38] still going to look pretty good i have
[7:40] no complaints about the quality
[7:42] if you look really closely it's not
[7:44] going to look as pristine as the
[7:45] original
[7:46] but for a video on the web that's going
[7:48] to be in the background i think this is
[7:50] more than enough personally now let's do
[7:52] the final file format which is going to
[7:53] be h265 and to be honest this one is a
[7:56] little bit optional like i said this is
[7:58] only available on
[8:00] apple devices
[8:02] so let's see h.265 that's just because
[8:04] this video format is not royalty free so
[8:07] basically apple is the only company
[8:09] that's willing to pay
[8:10] to use this in their software but it is
[8:13] going to be even more optimized let's
[8:15] just bring this up
[8:16] and
[8:17] as you can see it's down from 3.8
[8:19] megabytes to 2.9 megabytes so this one
[8:23] is optional but if you want to get a
[8:24] little bit more for your apple customers
[8:26] then i would recommend doing this one as
[8:28] well and so this command is going to
[8:30] look similar to the h.264 command that
[8:32] we ran
[8:33] the only difference is of course we've
[8:34] changed the
[8:35] codec to 265.
[8:38] we've changed the crf to be 28 a little
[8:40] bit higher and the quality will look
[8:42] similar to the h264 and we've just added
[8:45] an additional flag here dash tag colon v
[8:49] hvc1
[8:50] and that's just so that these will work
[8:51] on apple devices if you leave this out
[8:53] it may not work everything else is the
[8:56] same
[8:56] and so you can run that and get this
[8:59] right here which is going to be the
[9:01] smallest file size
[9:02] and of course remembering all these
[9:04] commands is going to be a big headache
[9:06] so what you can do to make your life a
[9:07] little bit easier is you can write a
[9:09] script like me
[9:11] or you can just borrow my script i'm
[9:12] going to have a link in the description
[9:14] for this but basically what this batch
[9:16] script is doing is you pass in a few
[9:18] arguments
[9:19] and then it will do all the work for you
[9:21] so it will run all the commands that it
[9:22] just told you with all the flags that i
[9:25] just told you and of course this is not
[9:26] set in stone you can change the crf
[9:28] values if you want these are just my
[9:30] personal preference you can play around
[9:32] with them a little bit more if you want
[9:34] to but you can run the script like this
[9:36] i would just type op video that is the
[9:38] name of my script you can name it
[9:40] whatever you want
[9:41] and then the input file which is going
[9:43] to be skyscrapers.mp4
[9:45] the resolution so 1920 pixels across
[9:49] and then the directory where you want
[9:51] the output to go so in my case i'm a new
[9:53] folder called videos and that is where
[9:56] they will go once they are all done
[9:58] transcoding
[9:59] and you can just enter this wait a few
[10:01] minutes for all those to encode and you
[10:03] know have three videos ready to go so
[10:05] that's how i do all of my video
[10:06] conversion now it is very fast and easy
[10:09] and so we can go in here open up a file
[10:10] browser see all the videos that is
[10:12] created and last but not least let's
[10:14] actually put them inside html file so
[10:17] you can see how this looks
[10:19] i have an index.html here and the way
[10:21] you're going to want to put all these
[10:22] files is like this so you're going to
[10:24] want to have a video tag
[10:26] and then
[10:27] three separate source tags or one for
[10:29] however many videos you have and so of
[10:32] course we have the best optimized video
[10:33] on top here and the lowest optimized
[10:36] video on the bottom
[10:37] so it will try to read this file if it
[10:39] can't then it will go down to here and
[10:41] if you can't read this then finally
[10:43] it'll go down to the fallback right here
[10:45] and you would just put the type of the
[10:46] video in here so this is an mp4 and then
[10:49] the codex just so that the browser will
[10:51] know which video to get
[10:53] and so for me personally
[10:55] it is going to get the webm video
[10:57] encoded with vp9 as you can see this is
[11:00] the only one that is loading
[11:02] it's not loading the h265 because i'm
[11:04] not on an apple device and your browser
[11:06] will be smart enough to get the
[11:07] appropriate video and that's about it so
[11:09] there are more things that you can do to
[11:11] optimize the videos even further but
[11:13] this will probably be enough for most
[11:15] people so all the commands that i gave
[11:17] you
[11:18] say in the script per se
[11:20] these are designed to give you the best
[11:22] quality
[11:23] with the least amount of file size
[11:25] without taking too long to encode so if
[11:28] you want you can get an even better
[11:29] quality with some additional options but
[11:31] just keep in mind that it's going to
[11:32] take even longer to encode all of these
[11:34] videos if you do something like that so
[11:37] just encoding all of these videos for a
[11:39] 15 second clip this normally takes about
[11:42] seven minutes to do all of these but if
[11:44] you follow this article i'll leave a
[11:46] link to this in the description this is
[11:47] a very well written article that helped
[11:50] me a little bit in making this video he
[11:52] personally recommends passing in a dash
[11:54] preset flag and setting it to very slow
[11:57] and what this will do is it will tell
[11:59] the compression to really take its time
[12:02] whenever it's compressing the video and
[12:04] so you're going to get the best quality
[12:06] but very slow does live up to his name
[12:08] and it takes an extremely long time to
[12:10] compress your video so you can add that
[12:12] flag if you really want the best quality
[12:15] it all depends on if you have maybe 30
[12:17] minutes an hour to compress all these
[12:19] videos and you can go even further i'll
[12:22] also leave links to more of these in the
[12:24] description but if you want maybe you
[12:26] can encode these with a two pass
[12:28] encoding method in my experience that
[12:30] gives you an even smaller file size so
[12:33] you can do more to optimize it even more
[12:35] but
[12:36] it's totally up to you if you want to go
[12:37] the extra mile for me just these
[12:39] commands are enough but just know that
[12:41] the options are available to you if you
[12:43] really want
[12:44] that's all there is to it now you can
[12:46] make websites and have your users enjoy
[12:48] your websites loading a lot faster than
[12:50] before because just as important as
[12:52] having a website that looks good is a
[12:54] website that works well never sacrifice
[12:56] aesthetics for a miserable user
[12:58] experience
[12:59] and hopefully this video helped you put
[13:01] some videos on your website the right
[13:02] way