In this section, we will learn what the preload attribute is and how to us it.

What is preload Attribute in HTML <video> Tag?

The video file that we set for HTML <video> element is basically an external resource and should be downloaded in order to be played on the webpage.

But when does this downloading process start? Is it at the beginning of page loading? Is it after users clicked the play button?

We can explicitly specify when the video file should be downloaded with the help of `preload attribute.

Note: the possible values of this attribute are explained in the rest of this section.

HTML preload Attribute in <video> Tag Syntax:

<video preload = "none | metadata | auto"> </video>

<video> Tag preload Attribute Values

There are three values that could be used for the preload attribute.

1. none: if the value of the preload attribute is set to “none” that means the download should only start when users clicked the play button.
2. metadata: if the value of the preload attribute is set to “metadata” that means the browser should only download the metadata related to the video file (like its length etc.) but the video file itself is delayed until users clicked the play button.
3. auto: this value means the process of downloading the video file should begin automatically even if users didn’t start to play the video file!

Example: using preload attribute in HTML <video> tag

See the Pen using preload attribute in HTML <video> tag by Omid Dehghan (@odehghan) on CodePen.