Skip to main content

HTML Video Element

Video element is used to embed video content in a document. It may contain one or more video sources, represented using the src attribute or the source element: the browser will choose the most suitable one.

Syntax​

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

Attributes​

  • autoplay: It is a boolean attribute. If specified, the video will automatically begin playback as soon as it can do so, without waiting for the entire video file to finish downloading.
  • controls: It is a boolean attribute. If specified, the browser will display controls to allow the user to control video playback, including volume, seeking, and pause/resume playback.
  • loop: It is a boolean attribute. If specified, the video player will automatically seek back to the start upon reaching the end of the video.
  • muted: It is a boolean attribute. If specified, the video will be initially silenced.

Example​

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Video Element Example</title>
</head>
<body>
  <h1>Video Element Example</h1>
  <video controls>
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
    Your browser does not support the video element.
  </video>
</body>
</html>
https://.../index.html

Video Element Example

Browser Support​

Video element is supported in all major browsers. You can check the browser compatibility here.

Accessibility​

  • Always provide a text alternative for video content.
  • Use the controls attribute to provide a user interface for controlling the video playback.
  • Use the autoplay attribute with caution as it can be annoying for users.

Resources​

Summary​

Video element is used to embed video content in a document. It may contain one or more video sources, represented using the src attribute or the source element: the browser will choose the most suitable one.