HTML Images and Media
HTML Video
The HTML
<video>element allows you to embed videos directly on web pages without relying on external plugins. You can display movies, tutorials, animations, or any video content.<video>supports multiple formats, provides built-in controls, and can autoplay, loop, or be muted for a better user experience.
HTML <video> Syntax
HTML Video Example
html
<video controls>
<source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.mp4" type="video/mp4">
<source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.webm" type="video/webm">
Your browser does not support the video tag.
</video>Explanation
<video>: The container for video content.controls: Displays standard video controls like play, pause, volume, and fullscreen.<source>: Specifies video files and types. Multiple sources improve browser compatibility.- Fallback text: Displayed if the browser does not support the
<video>element.
Attributes of <video>
controls: Shows video controls.autoplay: Starts playing automatically when the page loads.loop: Plays video repeatedly.muted: Mutes the video initially.poster: Displays an image before the video starts.width/height: Sets the size of the video player.
Example with Multiple Attributes
html
<video width="640" height="360" controls autoplay muted loop poster="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_thumbnail.png">
<source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.mp4" type="video/mp4">
<source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.webm" type="video/webm">
Your browser does not support the video tag.
</video>Supported Video Formats
- MP4 - most widely supported across all browsers.
- WebM - modern, open-source format with good compression.
- OGG / OGV - older open-source format.
⚠️ Tip: Provide multiple formats to ensure all browsers can play your video.
Example: Complete HTML Video Player
HTML Video Complete Example
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Video Example</title>
</head>
<body>
<h2>Watch Our Tutorial Video</h2>
<video width="640" height="360" controls poster="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_thumbnail.png">
<source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.mp4" type="video/mp4">
<source src="https://ik.imagekit.io/html5andcss3/lesson-samples/sample_video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
<p>Enjoy the video directly in your browser with built-in controls!</p>
</body>
</html>Advantages
- Embed videos without third-party plugins.
- Cross-browser support with multiple source formats.
- Customizable playback with attributes like
controls,autoplay,loop, andposter. - Enhances engagement and user experience on your website.
Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Partially |
Conclusion
The HTML <video> element allows seamless video integration for websites.
Using multiple formats, the controls attribute, and optional features like poster and autoplay ensures your content is accessible, engaging, and compatible across modern browsers.
Videos make your web pages dynamic, interactive, and professional, all without additional plugins.