HTML Video Tag

The HTML <video> tag is used to embed videos directly into an HTML document. It allows you to play videos on your web page without the need for external video players.

Here's the basic structure of the <video> tag:

<video src="video.mp4" controls>

  Your browser does not support the video tag.

</video>

To embed a video, you specify the source of the video using the src attribute. The src attribute should contain the URL or file path of the video file.

The controls attribute enables the default video controls, such as play/pause, volume control, and fullscreen button. Users can interact with these controls to manipulate the video playback.

Inside the <video> tag, you can also include alternative content, such as text or an image, that will be displayed if the browser does not support the <video> tag. This is useful for providing fallback content for browsers that do not support video playback.

Additional attributes can be used to customize the behavior and appearance of the video player, such as autoplay to automatically start the video, loop to play the video in a continuous loop, poster to specify an image to be displayed before the video starts, and more.

Example with additional attributes:

<video src="video.mp4" controls autoplay loop poster="poster.jpg">

  Your browser does not support the video tag.

</video>

In this example, the video will automatically start playing (autoplay), loop continuously (loop), and display a poster image (poster) before the video starts.

The HTML <video> tag supports various video formats such as MP4, WebM, and Ogg. It's recommended to provide multiple video formats to ensure compatibility across different browsers and devices. You can do this by including multiple <source> tags within the <video> tag, each with a different video format.

<video controls>

  <source src="video.mp4" type="video/mp4">

  <source src="video.webm" type="video/webm">

  <source src="video.ogg" type="video/ogg">

  Your browser does not support the video tag.

</video>

In this example, the browser will choose the appropriate video format based on its compatibility.

The <video> tag allows you to enhance your web pages with video content, making it engaging and interactive for your users. Remember to consider video file sizes and formats for optimal performance and compatibility across different devices and browsers.