Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

HTML Video and Audio

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Creating Media

4:53 with Nick Pettit

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 up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up