HTML <Video> Tag

Definition

The <video> tag is used to embed a video player in your HTML document. It can contain multiple video sources, with the browser choosing the most suitable one.

Example

<video controls width="250">
    <source src="https://file-examples-com.github.io/uploads/2020/03/file_example_WEBM_1920_3_7MB.webm"
            type="video/webm">
    <source src="https://res.cloudinary.com/thewebmaster/video/upload/v1614789951/image/file_example_WEBM_1920_3_7MB.mp4"
            type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
</video>

Usage

• Both the opening and closing tags are required.
• If the element has a src attribute it can contain zero or more <track> elements.
• If the element does not have a src attribute it can contain zero or more <source> elements, then zero or more <track> elements.
• The <video> element may contain content. This only shows on older browsers that do not support video and usually contain a message to users advising them to upgrade browser or an alternative method of accessing the video.
• The <video> element supports three video formats: MP4, WebM, and OGG. These formats are supported by all the main browsers, except for OGG in Safari (browser plugins are available).

Attributes

The <video> element supports the Global Attributes, along with the following:

• autoplay

  The autoplay attribute is a boolean attribute (either present on not) that specifies the video to begin automatically as soon as it can. It does not wait for the whole video file to be downloaded.

  <video controls width="250" autoplay>
    <source src="https://file-examples-com.github.io/uploads/2020/03/file_example_WEBM_1920_3_7MB.webm"
            type="video/webm">
    <source src="https://res.cloudinary.com/thewebmaster/video/upload/v1614789951/image/file_example_WEBM_1920_3_7MB.mp4"
            type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
  </video>

• controls

  The controls attribute specifies whether to display the default browser video player enabling the user to stop or start the playback, change the volume, and position seek.

• crossorigin

  The crossorigin attribute relates to whether to use CORS to fetch the audio file. When not used, the audio file is requested without sending the origin. You can read more about this here.

• height

  The height attribute specifies the height of the video player in pixels.

• loop

  loop is a boolean attribute (either present on not) that specifies the video to automatically start from the beginning once it reaches the end of the video.

  <video controls width="250" loop>
    <source src="[/media/cc0-videos/flower.webm](https://file-examples-com.github.io/uploads/2020/03/file_example_WEBM_1920_3_7MB.webm)"
            type="video/webm">
    <source src="https://res.cloudinary.com/thewebmaster/video/upload/v1614789951/image/file_example_WEBM_1920_3_7MB.mp4"
            type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
  </video>

• muted

  muted is a boolean attribute that specifies whether to start the video with no sound. The default value is false.

  <video controls width="250" muted>
    <source src="[/media/cc0-videos/flower.webm](https://file-examples-com.github.io/uploads/2020/03/file_example_WEBM_1920_3_7MB.webm)"
            type="video/webm">
    <source src="https://res.cloudinary.com/thewebmaster/video/upload/v1614789951/image/file_example_WEBM_1920_3_7MB.mp4"
            type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
  </video>

• playsinline

  The playsinline attribute is a boolean attribute that enables mobile browsers to play the video within the page’s content instead of playing it in fullscreen mode.

• poster

  The poster attribute specifies an URL for an image to show while the video is downloading. If not specified, nothing is displayed until the first frame has downloaded, then that first frame will be displayed.

• preload

  The preload attribute specifies whether the browser should preload the video file. It takes the following values:

  • none - indicates that it should not be preloaded.
  • metadata - only the metadata, such as audio length, should be fetched.
  • auto - indicates the whole audio file should be downloaded automatically, regardless of user intent.
  • Where no value is given, it will be treated as using the auto value.

  It should be noted that where the autoplay attribute is specified, it will take precedence.

• src

  The src attribute specifies the source of the audio file. You can use the <source> element within the video element instead if you wish.

• width

  The width attribute specifies the width of the video player in pixels.

Events

The Video element supports the following events:

• audioprocess
• canplay
• canplaythrough
• complete
• durationchange
• emptied
• ended
• loadeddata
• loadedmetadata
• pause
• play
• playing
• ratechange
• seeked
• seeking
• stalled
• suspend
• timeupdate
• volumechange
• waiting

Best Practices

• Auto-playing video can be unpleasant for users. It is recommended not to use the autoplay attribute wherever possible.
• You should add captions or subtitles using the <track> element to provide better accessibility to those who may have trouble hearing or seeing the video.
• You can use the <video> element to play audio files. This is useful when you wish to add a <track> for accessibility reasons.

Specification

• HTML Living Standard Specification
• HTML5 Specification

Browser Support

Desktop

Mobile