The <video> element in HTML is used to show video content on web pages. It supports various video formats, including MP4, WebM, and Ogg. It was introduced in HTML5.
<video src="video.mp4" controls></video>
<!-- OR -->
<video controls>
<source src="video.mp4" type="video/mp4">
</video>
Generally, we prefer the syntax with the <source> tag wrapped between the video tag because:
<source> elements for different formats of the video (e.g., MP4, WebM, Ogg), improving cross-browser compatibility.type attribute, you can tell the browser the exact MIME type of the video file, helping it determine whether it can play the file.<video> ElementThe following attributes can be used with the <video> tag to enhance video playback:
| Attribute | Description |
|---|---|
controls |
Adds playback controls such as play, pause, volume, etc. |
width |
Specifies the width of the video player. |
height |
Specifies the height of the video player. |
autoplay |
Automatically starts playing the video when it's loaded. |
muted |
Mutes the video by default. |
src |
Specifies the video file’s path. |
type |
Defines the format of the video (e.g., video/mp4, video/webm). |
poster |
Specifies an image to be shown while the video is downloading, or until the user hits the play button. |
loop |
Specifies that the video will start over again, every time it is finished. |
<!DOCTYPE html>
<html>
<body>
<video controls width="320" height="240">
<source src="https://pasteyourvideourl.com" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>
<video> tag defines the video player, with width and height attributes setting its dimensions.controls attribute adds playback controls like play, pause, and volume.Three different formats are commonly supported by web browsers - MP4, Ogg, and WebM. The table below lists the formats supported by different browsers:
| Browser | MP4 | WebM | OGG |
|---|---|---|---|
| Google Chrome | Yes | Yes | Yes |
| Internet Explorer | Yes | No | No |
| Firefox | Yes | Yes | Yes |
| Opera | Yes | Yes | Yes |
| Safari | Yes | Yes | No |
<!DOCTYPE html>
<html>
<head>
<style>
video {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<video controls poster="https://via.placeholder.com/640x360.png?text=Video+Loading">
<source src="https://pasteyourvideourl.com" type="video/mp4">
</video>
</body>
</html>
poster attribute displays a placeholder image before the video loads or plays, enhancing the user experience.
<!DOCTYPE html>
<html>
<head>
<style>
video {
width: 640px;
height: 360px;
border: 2px solid #333333;
border-radius: 8px;
background-color: #000;
}
</style>
</head>
<body>
<video autoplay controls loop muted>
<source src="https://pasteyourvideourl.com" type="video/mp4">
</video>
</body>
</html>
autoplay, loop, and muted attributes ensure the video plays automatically, repeats indefinitely, and starts without sound, respectively.To ensure your videos are displayed correctly across all browsers, follow these best practices:
Since not all browsers support the same video formats, it's a good idea to provide multiple video formats (MP4, WebM, Ogg) in the <video> element. This will ensure that the video plays regardless of the browser the user is using.
To enhance user experience, make sure your videos are optimized for the web. Compress your video files without sacrificing too much quality. Use appropriate file sizes for faster loading times.
Add captions, subtitles, or other accessibility features to make your videos more inclusive. You can use the <track> element to provide captions in various languages.
Which attribute adds playback controls like play, pause, and volume to a video?