How to insert a video in HTML?

Hello guys,

Welcome to our HTML series.

In the last session we studied the audio tag of the HTML:

The way we add the audios and set the controls,

If we add any incorrect type the audio doesn't play.

If we add the correct type the audio gets played.

How do we add the source file to it

We studied all these points of the audio tag in the last segment.

I hope you covered all those points and performed the practical yourself.

Today's segment is about the video tags of HTML.

In the last session we focused on audio, we added and heard it.

But today we will concentrate on the video tag, how it is added, how we can add the videos through the video tag, how we can control them and also the attributes related to the video tag.

Let's start today's segment

First of all, it's the HTML video-tag

The video tag is written this way, angular brackets then video.

When we add the video tag in it, through the video tag we can add a movie clip or a song clip or any file that is in a video format into the web page

Usually, three types of formats are supported in HTML 5.

First is the MP4, second is the W E B M and third is the OGG.

So the video tag supports all these three formats.

So, today we will study the video tag with an example.

Let's say this is an example.

We will go to the sublime text, this is our sublime text

Set the file to HTML...

We will take the title as a "video example".

Let us save it with the name "video dot html".

Inside the body, we will add the video tag

As shown in the slide,

It's the video after that the controls, then the source, type and the video we add them one by one.

Video tag, source comes first inside it there is the source attribute and type attribute.

We will need a video file that we will add to the source, so here I have a video and its name is also "video".

It is an MP4 file, if we go to the properties and see we can find MP4 written there.

The file name is also video.

Inside the source, I will define the path video slash video dot MP4 & the type is type slash MP4.

As it's written here video slash MP4, let me correct that.

In the last audio tag, we added audio slash MP3, the same way if we are adding the video the type will be MP4, W E B M or O G G whichever the format is.

We will save it and run the program.

This is the program

Run

The program is running when I run it and you can see a big image is displayed along with the scroll bar.

This is the video in actual but because we haven't added the controls it is showing as an image and if I am clicking anywhere the video is not playing and I cannot see the controls either.

So let me go to the file

Now, I will add the controls in the video

The moment I add controls and save

Upon running I can see the added controls, there is the play button, timer, an icon for the volume, full-screen and options.

If I do not add the controls and only add the video, the video will get added but I will not be able to play it.

But when I will add the controls I will be able to play the video but also will be able to use the extra functionalities like the volume key and timer key.

As you can see the video has occupied more space than the full screen so we will give it a proper width and height.

So let's say I give it a width of 500 and height of 500.

Save

Okay

Upon saving I'm getting the video something like this, It has shrunk, it became smaller and is visible properly.

So let's say I just mention the height and remove the width and see what happens.

The video is now looking proper. The webpage has only considered the height, so the video is shown with the height of 500.

So, now if I play the video I can see it with sound and movement.

I am playing the video.

(10 secs gap, video plays)

So that was my video, on playing the 14-sec clip is getting played we have taken the video of learnvern only.

That was how we can add the video in HTML.

Now we will come back to the slide.

If there is a line written that " your browser doesn't support the html video tag" if this line is written and the browser doesn't support the video file, in that case the video will not be visible but this line will be shown in its place.

This indicates the user, and the user gets to know that here in this portion a video is added but because the browser doesn't support the video is not visible.

Next are the attributes of the videos, we will learn all the attributes of the video here.

The first attribute is the Controls, as we saw in the earlier example,

When we didn't add the controls, the video was shown as an image, which in that case, means the video can be seen but without controls, we cannot play it.

Let's say this is the video, and I will again remove the controls from here and run.

As you can see no control is provided here, which means the video appears as an image.

If I add the controls attribute, in that case, I will get the controls through which I can use the functionalities like play, pause, full-screen etc.

Next is the width attribute.

As we saw, the program is getting set with a proper width the moment we add width, let's say 500, in the program.

The video gets a proper width, with the help of width we can place the video wherever we want on the webpage with the required width.

Same way, the poster comes along with the width.

The poster is very important, it is an image when the video is on the web page.

Let's say our requirement is such that initially the video shouldn't be shown but only the image must be visible, in that case, we can use the poster attribute.

Let's say, the name of the program stored here is "video example".

Here, the video is placed in the video folder and here in the images, I have an image of learnvern.

So, when the page gets loaded if I initially don't want to make the video visible but instead of that I want to set an image.

What I will do in that case is I will add a poster here.

The path of the image is the file named learnvern, that is placed inside the images and the extension of the image is dot jpg.

So, let's say I add images slash learnvern dot jpg.

Save and reload the page.

The moment I reload the page, I can see the learnvern's image instead of the image of the site that was shown initially in the video.

This means when the page gets reloaded an image appears and when I play this video it is playing.

That means if I don't want to show the video when the page is reloaded and instead of that an image has to be shown within the same portion, in that case, we can use the poster attribute.

The next attribute is the autoplay, with autoplay the video starts as soon as the page gets reloaded.

So, currently, when we have reloaded the page the image is visible.

Let me reload the page,

Here the image is visible, but the video is starting only when I am clicking on play.

Let's say I go to the program and add autoplay here.

Save and Reload it.

I have added autoplay and I am saving and reloading it.

Reload,

When I reloaded the program the video wasn't playing automatically, which means the autoplay attribute isn't currently supported by this browser.

So in this case, I will open any other browser, let's say I have Microsoft Edge, I will go here and I place the same program there.

URL and I am hitting enter.

The moment I press enter the video is automatically started, here we can see the difference that the autoplay isn't working in chrome,

Whereas when I placed the program in another browser or the edge browser the video started automatically when the page was reloaded.

This means the autoplay is properly working in Microsoft Edge but not working in chrome.

This is a difference related to the browsers, that the attributes one browser supports aren't supported by every browser.

This difference is usually present.

Few things are not supported in the internet explorer whereas they are properly supported in the edge, chrome and Firefox.

That was the autoplay.

Next is the "loop".

The loop attribute can be defined as the moment a video gets over it starts all over again.

So let's say I go to the program and add a loop after the autoplay here.

And reload this program

As you saw, the moment the video gets over after 14 seconds it automatically starts again.

What happens through the loop is, as the video ends again the same video will start over and over.

So, if we want to keep the video in a continuous mode we use the loop attribute.

Next is "muted".

If we want to mute the video we will use mute.

I am adding muted after the loop

Save

Reload the page.

Here you can see the video is started and the timer is moving ahead but I can not listen to any volume or voice which indicates that the muted attribute is properly working and the video is running without any sound.

Along with that because we have given the loop attribute it is continuing and playing again and again.

The second last is the "preload".

What preload does is, it specifies the author to upload a video file when the page loads.

When the page is loaded, the author is provided with the functionality to load the video.

So if described properly,

If we define preload as none or true

When defined as none of the pages gets loaded the video doesn't get loaded.

And if I define preload as true the video loads along with the page itself.

So, if there's a scenario when I want to load the page but not the video added to that page, in that case, I will use preload.

Let's say, I give "none to the preload" by going to the program.

Save it

And Reload it

Here the video gets started.

What I will do, I will again go to the program and add reload none.

Refresh it

But still, it is not working, so I will remove the attributes mentioned before.

Save and Reload

Okay

The moment I removed all attributes autoplay, loop and muted and loaded the page I am not getting the video width and height instead of the controls with the image.

Let's check the difference again,

If I remove the preload and load the height is getting increased, the video is loading and the image is visible to me.

So, let's say If I add preload again and load.

Currently, the image is loading because we have added the poster attribute, but the video isn't loading because we have defined preload as none.

So, the moment I play it, the video will be loaded and shown.

So, preload defines whether we want to load the video or not when the page reloads.

This is a good advantage in the case when there are more and large-sized videos on the web page in MBs or GBs.

In that case, the page gets heavy and the loading time increases, so if we want to load more than one video on a page we can set preload as none.

In that case, when the user wants to watch a video and click on it only then it will load it.

So, through this instead of loading all the videos together, we can decrease the loading time by loading one video at a time.

The next attribute is the source attribute.

As we saw, we take the path of the video file where it is saved inside and define the location in the source under the SRC attribute.

If we define any incorrect path in the source, the video doesn't work properly.

If we make spelling mistakes,

Let's say I removed the "v" and kept only "ideo"

And I load it,

You can see the poster is shown but the video isn't loading because we made a spelling mistake and defined the wrong video.

If we correct the spelling the video gets loaded again.

So, we add the location where the file is stored, in the source.

Those were the video attributes,

Among these controls and sources are mandatory and if we do not define controls and source the video doesn't work totally.

If we do not add the rest attributes the video will work anyways but the rest attributes provide the functionalities to give a proper width, to set an image, to load, to play again and again etc.

All these are the attributes of the video.

So, here the attributes end.

The next segment will be for SVG, we are going to move to the graphics now.

Like how can we add graphics in HTML, this we will do using SVG.

So today's segment is related to videos, if you want to add a video you can add the way we studied today.

I request you guys to try and add and use the video tag, use all the video tags and run the program at your home.

If your program is running properly it is really well and good, you can check in different browsers if there's any difficulty.

Still, If you have any queries or comments, click the discussion button below the video and post there. This way, you will be able to connect to fellow learners and discuss the course. Also, Our Team will try to solve your query.

The next segment will be SVG in HTML.

Thank you.