HTML / HTML Tags

HTML <Video> Tag

Oct 12, 2022
4 min read
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

Browser Support

Desktop

ChromeEdgeFirefoxIEOperaSafari
YesYesYesYesYesYes

Mobile

Android WebviewChrome AndroidFirefox AndroidOpera AndroidiOS SafariSamsung Internet
YesYesYesYesYesYes