HTML Video

The HTML <video> tag is used to embed a media player which supports video playback into the HTML page. We use the HTML <video> tag and the <source> tag to show the video. For example,

<video width="320" height="190" controls>
    <source src="video.mp4" type="video/mp4">
</video>

Browser output

In the above code,

• video.mp4 - path to the video we want to display
• video/mp4 - the type of resource we want to display
• controls - allows user to control the video

The video.mp4 file in the above example is located in the same directory as the HTML file.

Note: It is recommended to include height and width for a video similar to HTML Image tag to prevent flickering on the initial page load.

HTML <video> with Multiple <source> Tag

We can provide multiple sources for the video using <source> tag. For example,

<video width="320" height="190" controls>
    <source src="video.ogg" type="video/ogg">
    <source src="video.mp4" type="video/mp4">
</video>

In the above example, the browser chooses the first <source> tag whose resource is supported. If the browser does not support the ogg format, it will move to the next <source> tag and play the mp4 file. This helps video play on a wide range of devices.

Attributes of HTML <video> tag

Let us look at the attributes supported by the HTML <video> tag.

• autoplay
• controls
• height and width
• loop
• muted
• src
• preload

We will learn about each of these in detail.

autoplay

The autoplay attribute automatically plays the video. For example,

<video width="320" height="190" controls autoplay>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

Browser output

In the above program, we have used the autoplay attribute. The video will start playing as soon as it is ready, without requiring the user to click the play button.

Note: The autoplay attribute is generally considered a bad user experience, as it can be annoying for users. Some browsers do not allow video to autoplay unless it is also muted.

controls

The control attribute allows the user to control the video. These controls might include things like a play button, a pause button, and volume control. This can be helpful for allowing the user to control the playback of the video, without needing to use any additional software or tools. For example,

<video width="320" height="190" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

Browser Output

Here, we can see controls provided by the browser.

height and width

The height and width attributes in <video> element specify the size of the video player in pixels. For example,

<video width="600" height="350" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

Browser Output

In the above example, the width and height of the video player are set to 600 and 350 pixels respectively.

We can also set the width or height of a video using CSS by applying a width or height property to the <video> element in a stylesheet or with the style attribute. For example,

<video style="height: 350px; width: 600px;" controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

Browser output

The height and width attributes let the browser know how much space to allocate for the video. Otherwise, it will cause the surrounding content to move when the video loads.

loop

The loop attribute specifies that the video will automatically play the video from the beginning once it ends. For example,

<video width="320" height="190" loop controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

Browser output

muted

The muted attribute sets the volume of the video to 0. For example,

<video width="320" height="190" muted controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.ogg" type="video/ogg">
</video>

Browser output

poster

The poster attribute specifies a link to an image to be shown when the video has not been played or is still downloading.

It is more like a thumbnail to the video. It is displayed where the video player will be shown, giving the user a visual indication of what the video is about before they decide to play it. For example,

<video width="300" height="220" controls poster="poster.png">
    <source src="video.mp4" type="video/mp4">
    <source src="video.ogg" type="video/ogg">
</video>

Browser output

If you do not specify a poster frame, the first frame of the video will be displayed as the poster frame instead.

src

The src attribute specifies the location of the video file that should be played in the video player. For example,

<video src="/videos/sample.mp4">

Here, the src attribute of the <video> element is used to specify the location of a single video file that should be played in the video player. This is the simplest way to include a video on an HTML page.

Note: At least one src attribute or <source> tag is required for HTML video.

preload

The preload attribute specifies how the video file should be loaded after the page loads for a better user experience. It may have one of the following values:

1. none: Indicates that the video should not be preloaded. For example,

<video preload="none" src="/videos/sample.mp4"></video>

2. metadata: Indicates that only video metadata is fetched. For example,

<video preload="metadata" src="/videos/sample.mp4"></video>

3. auto: Indicates that the entire video file will be loaded when the page loads. For example,

<video preload="auto" src="/videos/sample.mp4"></video>