HTML preload Attribute

The preload attribute on an <audio> or <video> element specifies if how the audio or video file is loaded after the page loads. Elements that accept this attribute include <audio>, and <video>.

Example

#

A preload attribute on an <audio> player.
The preload option is none. The audio file is only loaded when the start button is clicked.

<audio controls preload="none">
  <source src="/media/epic.mp3" type="audio/mpeg">
  <source src="/media/epic.wav" type="audio/wav">
</audio>

For additional details see our HTML audio preload Reference.


Using preload

The preload attribute specifies how the audio or video file is loaded after the page loads.

This attribute can specify that the audio or video file is loaded even if the user does not need it.

The preload setting is ignored when autoplay is enabled.


Syntax

<tagname preload="auto | metadata | none">

Values

#

Value Description
auto Loads the entire audio or video file when the page loads.
metadata Only audio or video metadata is loaded when the page loads.
none Does not load the audio or video file when the page loads.
empty string Assigning no value is the same as the auto setting.

Note:  Without the a preload setting, the media file loading is different for each browser. For consistency the metadata setting is often a reasonable option.


Elements that accept preload

The following elements accept the preload attribute.

Elements Description
<audio> Creates an audio player -- see example above
<video> Creates a video player

<video> with preload

A <video> tag with an preload attribute.
The video file is only loaded when the start button is clicked.

<video width="320" controls preload="none">
  <source src="/media/movie.mp4" type="video/mp4">
  <source src="/media/movie.ogg" type="video/ogg">
</video>

For additional details see our HTML video preload Reference.


Browser support

Here is when preload support started for each browser:

Chrome
4.0 Jan 2010
Firefox
4.0 Mar 2011
IE/Edge
9.0 Mar 2011
Opera
11.5 May 2011
Safari
4.0 Jun 2009

You may also like



Guides