HTML Video

Previous Next

The <video> element lets you embed a video directly into a web page using native browser playback, without requiring a third-party plugin. The browser draws its own player interface around the video frame.

1) Basic Video Element


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

The controls attribute displays the browser's native playback controls (play/pause, seek bar, volume, fullscreen). The width and height attributes reserve space for the video frame so the rest of the page doesn't shift while it loads.

Note: This page shows example code only, since this repository does not host a real video file. If this example were rendered in a browser with a valid src, you would see a rectangular video frame with an overlaid control bar — typically play/pause, a scrub/seek bar, volume, picture-in-picture, and a fullscreen button.

2) Multiple Sources for Format Fallback


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

Different browsers support different video codecs. Listing several <source> tags lets the browser pick the first format it can play. MP4 (H.264) has the widest support, followed by WebM and OGG.

3) Autoplay, Muted, and Loop


<video width="640" height="360" autoplay muted loop controls>
  <source src="movie.mp4" type="video/mp4">
</video>

autoplay starts the video as soon as it can play, and loop restarts it automatically when it ends. Just like audio, most browsers only allow autoplay when the video is also muted — unmuted autoplay with sound is blocked by default to avoid startling or annoying visitors. That's why background/hero videos on websites are almost always silent.

4) The poster Attribute


<video width="640" height="360" controls poster="preview.jpg">
  <source src="movie.mp4" type="video/mp4">
</video>

The poster attribute specifies an image to display in the video's place before the user presses play (or before the video has loaded a frame). Without a poster, the browser typically shows a blank black frame or the first available frame instead.

5) Captions and Subtitles with <track>


<video width="640" height="360" controls>
  <source src="movie.mp4" type="video/mp4">
  <track kind="subtitles" src="subs-en.vtt" srclang="en" label="English">
  <track kind="captions" src="captions-hi.vtt" srclang="hi" label="Hindi">
</video>

The <track> element adds timed text tracks to a video, typically written as WebVTT (.vtt) files. The kind attribute can be subtitles (translated dialogue), captions (dialogue plus sound effects, for accessibility), descriptions, or chapters. Adding tracks makes video content accessible to viewers who are deaf or hard of hearing, and to viewers who speak a different language.

Best Practices:

Always include the controls attribute so users can pause, seek, and adjust volume themselves.
Provide multiple <source> formats (MP4 at minimum, plus WebM) for broad browser support.
If using autoplay, you must also add muted, or most browsers will silently block playback.
Use a poster image so the video area doesn't look broken or blank before playback starts.
Add <track> captions/subtitles wherever possible for accessibility and better SEO.
Always set width and height to prevent layout shift while the video loads.

Previous Next