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.
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?
- First we need to download a video file and place it in the same html file directory (Folder). (If you have a video file, just place it in the same directory of the html page). Rename the file to anything you want, spaces and special characters are not allowed. In my example, I have renamed the video file to video.mov (The extension of my video is .mov).
- Decide the place in the webpage, where you want to place the video. Just add the video tag as below with source attribute and its value. (value: path to the file and its file name. Because our video file is in the same director. So we need to provide the file name only)
<title>This is a sample webpage</title>
<meta name=”content” description=”this is a sample webpage for practice purpose.”/>
This is a sample webpage. This webpage is for practice purpose to show a video. I have successfully developed the webpage.
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.
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.
See in the image, video file is resized to 250 pixel width and 250 pixel height.