Media & Embedded Content

<video> Tag

Embed video with controls, multiple sources, and captions.

1Embedding Video

Provide multiple <source> elements with different codecs for cross-browser support. Use <track> for closed captions.

Example Code

css

<video controls width="640" poster="thumb.jpg">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.webm" type="video/webm" />
  <track kind="captions" src="captions.vtt" srclang="en" label="English" />
  Your browser does not support the video tag.
</video>

2Put the element in context

Video content needs a usable way to play and pause, and meaningful alternatives for spoken or visual information. A decorative autoplay video has different requirements from an instructional recording. Do not assume a default player alone makes every video understandable.

3Practice with a small page

Add a short permitted video with controls and a caption track where appropriate. Test pausing and keyboard operation. Provide a transcript or equivalent explanation when the lesson depends on information that may not be available through the picture alone.

Finished reading?

Mark this topic as complete to track progress.

Next Topic

<audio> Tag