Preview
Video Player
00:00
00:00
The Source Element
3:08There 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.
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