HTML Video

HTML Video is a standard element in HTML5 that allows web developers to embed videos directly into web pages. The <video> element provides a native and standardized way to include video content on the web, making it accessible across different browsers and devices. The HTML Video element supports various video formats, codecs, and attributes to control the playback behavior and appearance.

Here is a basic example of using the <video> element:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Video Example</title>
</head>
<body>

    <h1>HTML Video Example</h1>

    <video width="640" height="360" controls>
        <source src="example.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>

</body>
</html>

You can click on above box to edit the code and run again.

Output

The <video> element is used to embed a video.
The width and height attributes define the dimensions of the video player.
The controls attribute adds standard playback controls (play, pause, volume, etc.) to the video player.
The <source> element is used to specify the video file (example.mp4 in this case) and its type (video/mp4).

It is important to provide multiple video formats (e.g., MP4, WebM, Ogg) to ensure compatibility across different browsers. The browser will automatically choose the appropriate source based on its capabilities.

Additional attributes and features of the <video> element include:

autoplay: Automatically starts playing the video when the page loads.
.loop: Causes the video to play in a loop.
muted: Starts the video with audio muted.
poster: Specifies an image to be displayed before the video starts playing.
preload: Specifies whether the browser should preload the video data.

Here's an example with additional attributes:

Example

<video width="640" height="360" controls autoplay loop muted poster="video-poster.jpg" preload="auto">
    <source src="example.mp4" type="video/mp4">
    <source src="example.webm" type="video/webm">
    Your browser does not support the video tag.
</video>

You can click on above box to edit the code and run again.

Output

Remember to provide alternative content (e.g., text or a link) within the <video> element. This content will be displayed if the browser does not support the <video> element or if the specified video formats are not supported.