HTML – VIDEO TAG

HTML video tags are used to place video file in a html webpage. Video tags, places the video in the html webpage.

HTML VIDEO TAG

Video tag- <video></video>. Video tag has closing tag too. Alike image tag, we need to provide the path of the video file in the video tag.

Example:

<video src=”video-file-name”></video>

When to use video tags in HTML Webpage?

If we want to show a video in our html webpage, then we need to use video tag. Video tag places the video in the html webpage.

What does video tag do in a html webpage?

When a browser encounters video tag in a html webpage, it places the video in the html webpage. It plays the video by default upon page loading.

How to use video tag in a html webpage?

<html>

<head>

<title>This is a sample webpage</title>

<meta name=”content” description=”this is a sample webpage for practice purpose.”/>

</head>

<body>

This is a sample webpage. This webpage is for practice purpose to show a video. I have successfully developed the webpage.

<video src=”video.mov”></video>

</body>

</html>

Note: Here the text information(This is a sample webpage. This webpage is for….) is for reference only.

Save the file and open the file in any browser. The result might appear as below.

video tag html webpage

The above snapshot is of a video file playing in the webpage.

You must have noticed, the moment you opened the file in browser, the video started playing immediately. Which you may not. We want when we click play button then only the video should play. For this we are going to use “controls” attribute of the video tag. It will provide us controls to control the video.

<video src=”video.mov” controls></video>

Note: Controls attribute of video tag do not take any values.

Now, do the required changes, save the file and open in any browser. Now you would notice, the video is appearing but is not playing. Now, various controls such as play / pause, sound control, toggle between full screen button is present. Now click on the play button, it will play the video.

Another important point we have to note here, what ever is the dimension of the real video file, that video size file is going to appear in the html webpage. My video file dimension is 1920×1080 pixel. So it occupied entire screen. I might want to resize the video to appear in the html webpage. So How can I achieve this?

How to resize video file in the html web page?

Alike image tag (<img>), video tag also supports width and height attribute. Lets resize the video file to 250 pixel width and 250 pixel height.

<video src=”video.mov” width=”250″ height=”250″ controls></video>

Now, do the required changes, save the file and open in any browser. You might get result as below.

video tag with height width attribute html webpage

See in the image, video file is resized to 250 pixel width and 250 pixel height.