Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed HTML Video and Audio!
You have completed HTML Video and Audio!
Preview
One of the most important factors to keep in mind while creating a webpage is file sizes. The more data you have to load, the more your site visitors will have to wait around. In this video, we'll learn some of the basics of media compression.
Resources
There are many programs that can help format media for the web. Here are two that are mentioned in this video:
Software versions change frequently and sometimes the interface evolves. However, if the version you download looks different than this video, the general principles should remain the same.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
One of the most important factors to
keep in mind while creating a webpage is
0:00
file sizes.
0:04
The more data you have to load,
0:06
the more your site visitors
ill have to wait around.
0:07
This is always important but
0:11
it's especially important with media,
like audio and video,
0:12
because they typically have much larger
file sizes than text and images.
0:17
It's not enough to just take a video clip
from your camera or your smartphone and
0:22
just toss it onto a webpage.
0:27
Rather, you need to make sure that you
compress the video and audio properly so
0:29
that it has a small file size,
but still looks and sounds good.
0:35
So, there's a couple of different
programs that you could use to do this.
0:40
One is VLC or VideoLan, and
this is a media player,
0:45
but it does a whole bunch of stuff,
and one of them is convert video.
0:50
You could also use another program
like Adobe Media Encoder or
0:54
maybe a nonlinear video
editor of your choice.
1:00
Just about anything will be able to
convert the video into at least H.264,
1:04
which is a format supported by
Internet Explorer and Safari.
1:09
However, to get the files into Ogg Theora,
VLC should work just fine.
1:14
So let's switch over to VLC.
1:19
You can download it,
1:22
and when you install it on a Mac,
it will look something like this.
1:24
And I'll go up to File here.
1:28
And I'll say convert slash stream.
1:31
It will give me a window
here where I can open media.
1:35
Then, I have the file here
that I want to convert.
1:39
I already have this video.
1:43
This was shot on a pretty nice camera but,
you can get this same kind of file format
1:46
from an iPhone or
maybe an Android phone and convert it.
1:51
Pretty much any incoming video you can
convert into the format that you need.
1:57
Next, you'll need to choose a profile and
there's two things going on here.
2:02
There is the encapsulation and
there's also the video Kodak.
2:06
So before we get into that,
let's go back and take a look.
2:12
The encapsulation is
basically the file format.
2:15
So in this case we're gonna have
an MP4 but could have something like
2:18
web M which is another
web based video format.
2:23
And there is also Theora Vorbis or
2:27
OGG Theora as it's sometimes called and
this is going to be an OGG file format.
2:30
So that's the encapsulation.
2:36
Then the CODEC is how the video and
the audio is compressed.
2:38
That's why there's two things listed
on each one of these with a plus.
2:42
So H.264 in this case,
is the video compression.
2:47
And then, MP3 is the audio compression.
2:52
There's also Theora Vorbis,
which is a video, and audio combination.
2:56
So again, for Internet Explorer and
Safari, this first one will work.
3:03
And then you can click Save as file, and
then you can choose an output location.
3:08
So maybe you can save it in the same
spot and just call it myvideo or
3:15
whatever you want to call it.
3:19
In this case we called it Bridge.mp4, and
3:21
you would click Save, and
it would start to convert for you.
3:24
And then you would want to do
the same thing for [UNKNOWN, and
3:30
if you click Browse, you could save it
to a location and it will save out.
3:36
Now the thing to remember here is
you want to keep this file size low.
3:42
So if you click that customize button
you can go to the video codec,
3:46
and let's actually go
back to H.264 plus mp3,
3:52
and under video codec here
you can adjust the bit rate.
3:57
So you might want to put
something on the order of 5,000 or
4:01
maybe 10,000 and
slowly work your way down.
4:04
And the frame rate for this particular
video is 24 frames per second but
4:09
you can adjust that if you like and
then you want an output resolution.
4:14
This is another place that you
can play with the file size.
4:18
So you might say 1280 by 720 and
the source for this particular video
4:22
is 1920 1080 so we'd actually be scaling
this down in resolution a little bit.
4:28
But that will produce a smaller file size.
4:32
So the bit rates and the resolution under
video are two things to pay attention to.
4:36
So when you output video and audio,
make sure to adjust your settings
4:42
appropriately so that you get the optimal
balance between file size and quality.
4:47
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up