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

The Source Element

3:08 with Nick Pettit

There are two different ways to write the video element. In this video, we'll learn about the format that utilizes an opening and closing tag.

HTML Elements

  • <source> - The source element specifies media resources for the <video>, <audio>, and <picture> elements.

Resources

Video and Audio URLs

Here are the video and audio files used in this course. There is no need to download these files; they are just listed here so that you can easily copy these URLs into your code.

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

    So, I mentioned that there were two different ways to type out the video 0:00
    element. 0:04
    Lets try the other way to typing it out. 0:05
    We have a video here. 0:08
    I am actually going to close that video tag. 0:09
    So we have an opening and closing tag now. 0:13
    I am going to just cut the type and source attribute to my clipboard. 0:15
    So, let's cut that and let's say source. 0:22
    We'll paste that in and close the source element. 0:26
    So now we have the source element here and 0:31
    we're basically just moving these attributes over to this source element. 0:33
    Now, why would we wanna do that? 0:38
    Well, In most cases, with video you will have multiple sources. 0:39
    So let's copy that source element and paste it here. 0:45
    Now the reason you would want to have multiple sources is not because 0:50
    you want to have maybe two different videos in the same player. 0:53
    But rather you need to provide different file types depending on which browser 0:57
    is viewing your video. 1:02
    So we have have an MP4 file here, but 1:04
    we also have an Ogg Theora format which is another video format. 1:06
    And that's supported in other browsers and 1:11
    we need to have both in this particular case. 1:14
    So all I've done here is copied this source element, pasted it here, and I've 1:18
    changed the file format to ogg, and I've also changed it in the type attribute. 1:23
    And if we go refresh the page, nothing will actually happen, 1:29
    it will look exactly the same. 1:32
    But just know that we now have slightly broader browser support. 1:34
    Now before we move on, we should take a look at the documentation for video. 1:38
    So, I'm going to just over to Google here, and we'll type in mdn video. 1:43
    And that will bring up the Mozilla Developer Network Documentation for video. 1:48
    And it's right here up at the top. 1:56
    Here's the documentation for the video element and 1:59
    up at the top of an NDN documentation page, there will be a summary. 2:04
    So it says, each small video element is used to embed video content. 2:09
    Okay, great. 2:13
    That is something we already know. 2:14
    We can get a little bit of information about its usage and 2:16
    kind of, what context can we use it in. 2:21
    And then here's a big list of attributes. 2:24
    And we've already looked at a couple of attributes such as, autoplay and controls. 2:26
    But you'll notice that there's quite a few others here. 2:31
    For example there's height, there's also width. 2:35
    And there's another Boolean attribute here called loop. 2:38
    And if we added this without any kind of value, just like the controls or 2:42
    auto-play attribute, this would actually loop the video and 2:47
    bring it back to the beginning after it reaches the end. 2:51
    So be sure to check out the notes associated with this video. 2:54
    To get linked to this documentation page, and spend a little bit 2:58
    of time reading the documentation, and getting familiar with the video element. 3:02

    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