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