We all have seen the videos available on the web page. This HTML <video> tag can be added to an HTML document to play a video. It embeds a media player that supports video playback in an HTML document. In this tutorial, you will study the HTML <video> tag.
What Is HTML <video> Tag?
There are different ways to add a video to an HTML document. Users can also use the <video> tag for audio content, but the HTML <audio> tag will help the document in a more appropriate format for a better user experience. Before HTML 5, users could only play videos in the browser using a plugin. But when HTML 5 came into existence, users found more ease in adding a video to a webpage that became as easy as adding an image. The HTML5 <video> tag defines a standard method to embed video content on the web page.
The HTML video tag embeds video content in an HTML document. It allows a video file to be included on a web page and to control its playback using HTML and JavaScript.
Here is an example of how the video tag can be used on a webpage:
Example:
<video src="myvideo.mp4" width="640" height="360" controls></video>The above HTML code will embed a video file named myvideo.mp4 on the webpage, with a width of 640 pixels and a height of 360 pixels. The controls attribute tells the browser to show default video controls, such as the play/pause buttons and the volume slider.
To use the video element, you need to specify the video file URL using the src attribute and set the width and height of the video using the width and height attributes. You can also use the controls attribute to show the default video controls, such as a play/pause button and a volume slider.
The HTML <video> tag can include one or more <source> tags with various video sources. But at the same time, the browser will prefer the first source; that it supports. Web browsers generally support three different formats. These are mp4, Ogg, and WebM.
Example:
<video width="640" height="360" controls>
<source src="myvideo.mp4" type="video/mp4">
<source src="myvideo.webm" type="video/webm">
<p>Your browser does not support the video element.</p>
</video>This will provide two sources for the video, an MP4 file, and a WEBM file. The browser will use the first source it supports. If a source is not supported, the browser will display fallback content (in this case, a paragraph of text) inside the video element.
HTML <video> Tag Attributes
The video element has several attributes that can be used to control its behavior and appearance. Here are some of the most commonly used attributes:
src: The URL of the video file to embed.width: The width of the video player in pixels.height: The height of the video player in pixels.controls: If present, shows the default video controls (play/pause button, volume slider, etc.).autoplay: If present, starts playing the video automatically when the page loads.poster: The URL of an image file to display as a placeholder before the video plays.preload: This attribute specifies if and how the video should be loaded when the page loads. Possible values are"none","metadata", and"auto".loop: If present, the video will start over again when it ends.muted: If present, the video's audio will be muted.
Example:
<video src="myvideo.mp4" width="640" height="360" controls poster="poster.jpg" preload="metadata" loop muted></video>The above example would embed a video file called myvideo.mp4 on the page, with a width of 640 pixels and a height of 360 pixels. The controls attribute tells the browser to show the default video controls, and the poster attribute specifies an image to display before the video plays. The preload attribute tells the browser only to load the video's metadata (such as its duration) when the page loads, and the loop attribute tells the browser to start the video over again when it reaches the end. Finally, the muted attribute tells the browser to mute the video's audio.
