HTML5 Video

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.

Attribute	Description
`source`	The path to the video file.
`controls`	Shows built-in play/pause/volume controls.
`autoplay`	Starts playing the video automatically.
`loop`	Repeats the video after it ends.
`muted`	Starts the video with sound muted.
`poster`	Image to show before the video starts.
`width`	Sets the size of the video player.

Example:

<video 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.
nautoplay, 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.
Ogv(.ogv) – older open format.

HTML5 Video

What is the <video> element?

Example:

Why use multiple <source>?

On this page

What is the `<video>` element?

Why use multiple `<source>`?