So, I mentioned that there were two different ways to type out the video

element.

Lets try the other way to typing it out.

We have a video here.

I am actually going to close that video tag.

So we have an opening and closing tag now.

I am going to just cut the type and source attribute to my clipboard.

So, let's cut that and let's say source.

We'll paste that in and close the source element.

So now we have the source element here and

we're basically just moving these attributes over to this source element.

Now, why would we wanna do that?

Well, In most cases, with video you will have multiple sources.

So let's copy that source element and paste it here.

Now the reason you would want to have multiple sources is not because

you want to have maybe two different videos in the same player.

But rather you need to provide different file types depending on which browser

is viewing your video.

So we have have an MP4 file here, but

we also have an Ogg Theora format which is another video format.

And that's supported in other browsers and

we need to have both in this particular case.

So all I've done here is copied this source element, pasted it here, and I've

changed the file format to ogg, and I've also changed it in the type attribute.

And if we go refresh the page, nothing will actually happen,

it will look exactly the same.

But just know that we now have slightly broader browser support.

Now before we move on, we should take a look at the documentation for video.

So, I'm going to just over to Google here, and we'll type in mdn video.

And that will bring up the Mozilla Developer Network Documentation for video.

And it's right here up at the top.

Here's the documentation for the video element and

up at the top of an NDN documentation page, there will be a summary.

So it says, each small video element is used to embed video content.

Okay, great.

That is something we already know.

We can get a little bit of information about its usage and

kind of, what context can we use it in.

And then here's a big list of attributes.

And we've already looked at a couple of attributes such as, autoplay and controls.

But you'll notice that there's quite a few others here.

For example there's height, there's also width.

And there's another Boolean attribute here called loop.

And if we added this without any kind of value, just like the controls or

auto-play attribute, this would actually loop the video and

bring it back to the beginning after it reaches the end.

So be sure to check out the notes associated with this video.

To get linked to this documentation page, and spend a little bit

of time reading the documentation, and getting familiar with the video element.