Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses 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.
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