HTML <video> element

The <video> element embeds video into a web page, for example a demonstration, lesson, interview, animation, or screen recording.

Use src for a single video file. To offer alternative formats, omit that attribute and put <source> elements inside the player. Place any <track> elements after those sources, followed by fallback content.

The boolean controls attribute displays native playback controls. The playsinline attribute hints that playback should stay within the page rather than switching to a fullscreen player; it does not start playback. Control appearance and behaviour vary by browser and device.

The poster attribute supplies a representative image for the player before video frames are available. The width and height attributes specify dimensions in CSS pixels, using integers without unit suffixes. CSS can resize the player while preserving its aspect ratio.

The preload values none, metadata, and auto hint at no advance loading, loading basic information, or loading as much as the browser considers appropriate. They are hints, not guarantees. The boolean autoplay attribute requests automatic playback, which browser policies may block. The muted attribute sets the initial muted state and loop repeats playback.

Captions supplied through <track> can describe speech and meaningful sounds in time with the video. A transcript or description beside the player can also explain information conveyed by its images. Fallback text inside <video> is for browsers without element support; it does not appear merely because a media file fails to load.

The example shows a title card while a quiet tone plays for three seconds. Press Play to start it. The caption track describes the sound, and the text below the player describes both the picture and the sound.

Attributes: src, crossorigin, poster, preload, autoplay, playsinline, loop, muted, controls, width, height, GLOBALS.

Typical layout:
<video controls playsinline preload="metadata"
  width="320" height="180"
  poster="examples/media-poster.png">
  <source src="examples/media-example.mp4" type="video/mp4">
  <track src="examples/media-captions.vtt"
    kind="captions" srclang="en" label="English" default>
  Your browser does not support the video element.
</video>
<p>Video description: a title card reads “Media example” and “Three-second tone” while a steady tone plays.</p>
<p><a href="examples/media-example.mp4" download>Download the video</a></p>

Visual representation: