HTML Video
📹 Introduction to HTML <video> Element
The <video> element in HTML5 allows you to embed video content directly into web pages without needing third-party plugins. It's powerful, flexible, and widely supported across modern browsers. 🌐
>>“The web is no longer static — bring it to life with video!” 🎥
🛠️ Basic Syntax
Here's the basic structure for using the <video> tag:
Basic Video Tag
<video width="640" height="360" controls>
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>Note
💡 Always include fallback text for browsers that don’t support HTML5 video.
🎞️ Video Attributes
| Attribute | Description |
|---|---|
| controls | Displays play, pause, volume, etc. |
| autoplay | Starts playing the video automatically (muted is often required) |
| loop | Repeats the video when it's finished |
| muted | Starts video with audio off (useful for autoplay) |
| poster | Image shown before video plays |
| preload | Indicates if/how the browser should load the video (none, metadata, auto) |
🔄 Using Multiple Video Sources
To maximize compatibility across browsers, provide multiple <source> elements with different video formats.
Multiple Source Example
<video controls>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.webm" type="video/webm" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>Note
💡 Browsers play the first format they support. MP4 is the most widely supported.
📝 Add a Poster Image
Use the poster attribute to display a preview image before the video starts.
Poster Example
<video width="320" height="240" controls poster="poster.jpg">
<source src="video.mp4" type="video/mp4" />
</video>🧠 Accessibility & Best Practices
- Use captions with the <track> tag for accessibility.
- Keep file sizes optimized for faster load times.
- Host videos on CDNs or platforms like YouTube for better performance.
- Avoid autoplay with sound — it frustrates users and is often blocked.
🧪 Track Subtitles & Captions
Video with Subtitles
<video controls>
<source src="movie.mp4" type="video/mp4" />
<track src="subtitles.vtt" kind="subtitles" srclang="en" label="English" />
</video>Note
⚠️ The subtitle file must be in the .vtt format (WebVTT).
🔗 Useful Resources
>>“A well-placed video tells a story faster than a thousand lines of code.” 🎯