The `<video>` tag in HTML is used to embed videos on web pages. In this tutorial, we will cover the basic syntax and usage of the `<video>` tag.
### Basic Syntax
The basic syntax for the `<video>` tag is as follows:
“`html
<video src=”video.mp4″></video>
“`
In this example, we have a simple `<video>` element with a `src` attribute that specifies the location of the video file. The `src` attribute can be a URL or a file path.
### Attributes
There are several attributes that can be used with the `<video>` tag to specify various options for the video. Here are some of the most commonly used attributes:
– `src`: Specifies the location of the video file.
– `width` and `height`: Specifies the width and height of the video player in pixels.
– `controls`: Adds playback controls (play, pause, etc.) to the video player.
– `autoplay`: Starts playing the video automatically when the page loads.
– `loop`: Repeats the video when it reaches the end.
– `muted`: Mutes the audio of the video.
– `poster`: Specifies an image to be displayed before the video starts playing.
Here is an example that uses some of these attributes:
“`html
<video src=”video.mp4″ width=”640″ height=”360″ controls autoplay loop muted poster=”poster.jpg”></video>
“`
### HTML5 Video Formats
HTML5 video is supported by most modern browsers, but different browsers support different video formats. To ensure that your video is playable on all devices and browsers, you should provide multiple formats of the video. The most commonly used formats are:
– MP4 (H.264 codec)
– WebM (VP8 codec)
– Ogg (Theora codec)
You can specify multiple video formats using the `<source>` tag inside the `<video>` tag. Here is an example:
“`html
<video width=”640″ height=”360″ controls>
<source src=”video.mp4″ type=”video/mp4″>
<source src=”video.webm” type=”video/webm”>
<source src=”video.ogv” type=”video/ogg”>
</video>
“`
In this example, we have provided three different video formats using the `<source>` tag, each with a different MIME type specified in the `type` attribute.
### Conclusion
The `<video>` tag is a powerful and versatile HTML element that allows you to embed videos on your web pages. By using the various attributes and providing multiple video formats, you can ensure that your videos are playable on all devices and browsers.
