How to embed a video in HTML5 without external plugins

· Category: HTML & CSS

Short answer

Use the native <video> element with <source> children to provide multiple formats, and include <track> for captions and a text fallback for older browsers.

Steps

  1. Add a <video> tag with controls for built-in playback UI.
  2. Include multiple <source> elements with different formats (MP4, WebM).
  3. Add <track kind="captions" src="..." srclang="en" label="English" /> for accessibility.
  4. Provide fallback text or a download link inside the video tag.

Example

<video controls width="640" height="360" poster="preview.jpg">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  <track kind="captions" src="captions.vtt" srclang="en" label="English" default />
  <p>Your browser does not support HTML5 video.
     <a href="video.mp4">Download the video</a> instead.</p>
</video>

Tips

  • Always provide captions for accessibility and SEO.
  • Use the preload attribute (auto, metadata, none) to control bandwidth usage.
  • Compress videos and serve them via a CDN for better performance.