HTML Video

HTML Video element <video> can be used to show a video on a web page.

We just need the below details to include a video file.

  • Video file source location and its format
  • Text to display instead of video in case the browser does not support <video> element

In the below example, we have included a video movie.mp4 which can be accessed from the location /assets/videos/movie.mp4, which is of type video/mp4 video format.

  • Always include width and height attributes values to display the video properly on a web page
  • The text within the <video> element is displayed when a browser does not support the video element
<video width="400" height="300" controls>
    <source src="/assets/videos/movie.mp4" type="video/mp4">
    Oops!! Your browser does not support video element.
</video>

HTML Video - Supported Formats

HTML video element supports only three video formats as mentioned below.

  • MP4 videos with type = video/mp4
  • WebM videos with type = video/webm
  • OGG videos with type = video/ogg

HTML Video - Multiple Sources

In case, if we have different formats of the same video, then all those formats can be provided within the same <video> element as shown below.

The browser will pick up the first recognizable format from the multiple sources provided.

<video width="400" height="300" controls>
    <source src="/assets/videos/movie.mp4" type="video/mp4">
    <source src="/assets/videos/movie.webm" type="video/webm">
    <source src="/assets/videos/movie.ogg" type="video/ogg">
    Oops!! Your browser does not support video element.
</video>

HTML Video Attributes

Here is the list of attributes that a video element can have.

  • Attributes width and height with values defaulted to pixels
  • Attribute controls to display audio controls like play, pause, volume, download, and playback speed options
  • Attribute autoplay to automatically start playing audio upon page load
  • Attribute muted to mute audio upon page load
<video width="400" height="300" controls autoplay muted>
    <source src="/assets/videos/movie.mp4" type="video/mp4">
    <source src="/assets/videos/movie.webm" type="video/webm">
    <source src="/assets/videos/movie.ogg" type="video/ogg">
    Oops!! Your browser does not support video element.
</video>

Example

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
    <h1>HTML Video</h1>
    <video width="400" height="300" controls>
        <source src="/assets/videos/movie.mp4" type="video/mp4">
        <source src="/assets/videos/movie.webm" type="video/webm">
        <source src="/assets/videos/movie.ogg" type="video/ogg">
        Oops!! Your browser does not support video element.
    </video>
</body>
</html>

Overall

HTML Video element <video> makes it easy to add a video file to a web page.