01. Basic HTML5 Video

The foundation of web video—semantic, accessible, and native

Minimal Example

The simplest video implementation with just source and controls.

<video controls poster="thumbnail.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <!-- Fallback for no video support -->
  <p>Your browser doesn't support HTML5 video.</p>
</video>
Why multiple sources? Different browsers support different video formats. By providing both WebM and MP4, you ensure compatibility across all modern browsers. The browser will use the first format it supports.

Essential Attributes

Understanding the key attributes that control video behavior.

Attribute Type Description
controls Boolean Show native playback controls (play, pause, volume, etc.)
autoplay Boolean Start playing automatically (requires muted in most browsers)
muted Boolean Start with audio muted
loop Boolean Restart video when it ends
playsinline Boolean Play inline on iOS instead of fullscreen
poster URL Image to show before video plays
preload none | metadata | auto Hint for how much to preload before play
width / height Number Intrinsic dimensions (CSS should handle responsive sizing)

Autoplay Example (Muted)

Autoplaying video requires muted attribute due to browser policies.

<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>
Browser autoplay policy: Since ~2018, browsers block autoplay with sound to prevent annoying user experiences. To autoplay, you must include muted. Users can then unmute if they choose.

The Fallback Pattern

Always provide fallback content for accessibility and older browsers.

<video controls poster="poster.jpg">
  <!-- Best quality first, fallbacks follow -->
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogv" type="video/ogg">

  <!-- Fallback content if video not supported -->
  <div class="video-fallback">
    <img src="poster.jpg" alt="Video thumbnail">
    <p>
      Your browser doesn't support HTML5 video.
      <a href="video.mp4">Download the video</a> (MP4, 12MB).
    </p>
  </div>
</video>