D Dev Notebook

HTML5 Video

HTML

What is the <video> element?

The <video> tag is an HTML5 element that lets you embed video files directly into your web page, so users can play them without needing a plugin like Flash. It provides a native way for browsers to play video.

<video src="movie.mp4" controls>
Your browser does not support the video tag.
</video>

This will display a video player with play/pause, volume, and fullscreen controls.

AttributeDescription
srcThe path to the video file.
controlsShows built-in play/pause/volume controls.
autoplayStarts playing the video automatically.
loopRepeats the video after it ends.
mutedStarts the video with sound muted.
posterImage to show before the video starts.
width / heightSets the size of the video player.

Example:

  <video src="movie.mp4" controls width="640" height="360" poster="thumbnail.jpg">
    <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
  Your browser does not support the video tag.
  </video>
  • <source> elements let you provide multiple formats, so the browser can pick one it supports.
  • poster is an image that shows before the user hits play.
  • autoplay, muted, loop enhance the behavior.

Why use multiple <source>?

Different browsers support different video formats:

  • MP4 (.mp4) – widely supported (uses H.264 video codec).

  • WebM (.webm) – good for modern browsers.

  • Ogg (.ogv) – older open format.