How to Add Video in HTML
With HTML, you may use the '<video>' element to include videos on your pages. You can embed video material into your HTML page using this element. To manage the video playback, you may set up a number of parameters, including the video source, size, autoplay, and more. Most contemporary web browsers like Chrome, Firefox, Safari, Edge, and Opera support the '<video>' element.
To add a video to your HTML document, use the element and identify the video file's source with the src property. The video player's behavior may also be customized by adding more properties, including controls to show playback controls, autoplay to start playback automatically, loop to repeat the video, and poster to set an image to appear before the movie begins.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Video Example</title>
</head>
<body>
<h1>HTML Video Example</h1>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support video tags.
</video>
</body>
</html>
Output:
Explanation:
This example shows a 320-pixel wide by 240-pixel tall video shown using the element. The controls property gives the video player additional playback controls, such as play, stop, volume, etc. The video source file (movie.mp4) and its type (video/mp4) are specified via the element inside the element. If the browser does not support the element, a fallback message with the phrase "Your browser does not support the video tag." will be displayed.
Optional Attributes:
The element in HTML allows for modification of the video player's behavior and look via optional parameters. Some of the optional characteristics that are frequently utilized include:
- Controls: Enhances the video player with playback controls (play, pause, volume, etc.).
- Autoplay: Indicates that the video will begin playing automatically as soon as it loads.
- Loop: Indicates that after the video ends, it should begin again. This is one example.
- Muted: Indicates that the video's audio should be turned off by default. This is one example.
- Posters: Indicates which picture will be shown as the thumbnail for the movie before it starts playing. </video> is one example of this.
- Preload: Indicates how the page should load and how the video should be loaded. "Auto", "metadata", and "none" are possible values. For instance,
Browser Support
Modern Chrome, Firefox, Safari, Edge, and Opera browsers support the element. However, different browsers may support different element capabilities and characteristics differently. The following is a broad summary of the typical properties and browser support for the element:
Preload Attribute: Compatible with all the main web browsers. Specifies the format in which the video should load when the website loads.
Fundamental Support: The element's fundamental features, such as volume control, fullscreen mode, and playing and pausing videos, are supported by all major current browsers.
Controls: All major browsers support this attribute, which gives the video player a default set of controls (play, pause, volume, etc.).
Autoplay feature: Most contemporary browsers support it, albeit it could be limited in some situations (for example, autoplay with sound may need user input, whereas muted autoplay is sometimes permitted).
Loop Attribute: Compatible with the majority of browsers. Permits an endless loop of the video.
Muted Attribute: Compatible for all major browsers. mutes the video's audio.
Poster Features: It is compatible with all major browsers. It shows a picture as the thumbnail for the video before it starts to play.