HTMLMediaElement: loading property

Limited availability

The loading property of the HTMLMediaElement interface provides a hint to the browser on how to handle the loading of the media which is currently outside the window’s visual viewport. This helps to optimize the loading of the document’s contents by postponing loading the media until it’s expected to be needed, rather than immediately during the initial page load. It reflects the <audio> element’s loading content attribute or the <video> element’s loading content attribute.

Value

A string whose value is one of eager or lazy. For their meanings, see the HTML <audio loading> or <video loading> reference.

Examples

Basic usage

The addVideoToList() function shown below adds a video thumbnail to a list of items, using lazy-loading to avoid loading the video from the network until it’s actually needed.

function addVideoToList(url) {
  const list = document.querySelector("div.video-list");

  const newItem = document.createElement("div");
  newItem.className = "video-item";

  const newVideo = document.createElement("video");

  // Lazy-load if supported
  if ("loading" in HTMLVideoElement.prototype) {
    newVideo.loading = "lazy";
  } else {
    // If native lazy-loading is not supported you may want to consider
    // alternatives, though this may be fine as a progressive enhancement.
  }

  newVideo.width = 320;
  newVideo.height = 240;
  newVideo.src = url;

  newItem.appendChild(newVideo);
  list.appendChild(newItem);
}

Specifications

Browser compatibility

See also

• The <audio> element
• The <video> element
• Web performance in the MDN Learning Area
• Lazy loading in the MDN web performance guide