The Source Element3: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.
- <source> - The source element specifies media resources for the <video>, <audio>, and <picture> elements.
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.
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