<video>

The <video> tag allows you to embed video files into an HTML page.

It is used to include videos and provides all the necessary features to control them:

• play;
• pause;
• and volume control.

It is often used in combination with the <source> tag to provide multiple video formats, ensuring maximum compatibility with different browsers.

Structure and Syntax of the <video> Tag

As we have discussed, it is ideal to use the video tag with one or more <source> tags (although it is not mandatory; we will discuss this later).

Syntax

Here is a basic structure:

<video controls>
  <source src="[link to video file]" type="[MIME type of the video file]">
  Alternative message if the browser does not support the element
</video>

Some quick explanations:

• controls: Adds controls to the video for play, pause, etc.;
• src: Specifies the path to the video file;
• type: Indicates the MIME type of the video, so the browser can choose its preferred format;
• "Alternative message": A message displayed if the user’s browser cannot play any of the offered formats.

Usage Examples

Basic Example

Here is a simple example to understand how to add a video to an HTML page with <video>:

<video controls>
  <source src="videos/sample.mp4" type="video/mp4">
  <source src="videos/sample.webm" type="video/webm">
  <source src="videos/sample.ogv" type="video/ogg">
  Your browser does not support the video element.
</video>

Here, we have three different video types: the browser can choose its preferred one.

If none of the three are playable by the browser, an alternative text will be displayed.

Example with an Autoplay Video

<video autoplay>
  <source src="videos/movie.mp4" type="video/mp4">
  <source src="videos/movie.ogg" type="video/ogg">
  This video is not playable on this browser.
</video>

Attributes

Specific Attributes for the <video> Tag

Global Attributes

The <video> tag also supports global attributes such as id, class, style, title, etc.

Recommendations

Several specifics of the <video> tag should be considered when using it on your HTML pages.

Provide as Many Formats as Possible

It is recommended to provide multiple video formats (such as MP4, WebM, and OGG) to ensure compatibility with all browsers.

Otherwise, the alternative text will be displayed on unsupported browsers.

Always Specify the MIME Type

When it comes to formats, it is also mandatory to include the MIME type for each video in the <source> tags. Without it, the browser won’t know the file types and will display alternative text – which would be unfortunate! 😋

Add Subtitles with <track>

To enhance your videos’ accessibility, it is highly recommended to add subtitles using the <track> tag.

For example, here’s a video with multiple sources and subtitles:

<video controls>
  <source src="videos/sample.mp4" type="video/mp4">
  <source src="videos/sample.ogv" type="video/ogg">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <track src="subtitles_fr.vtt" kind="subtitles" srclang="fr" label="French">
  Your browser does not support the video element.
</video>

Browser Compatibility

The <video> element is compatible with all browsers.