HTMLMediaElement: loading property

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

See full compatibility

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

Specification
HTML # attr-media-loading

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`loading` Experimental	Chrome – Preview support Chrome 148 (Release date: 2026-05-05) footnote Preview browser support	Edge – Preview support Edge 148 (Release date: 2026-05-07) footnote Preview browser support	Firefox – No support Firefox footnote footnote See bug 2005072	Opera – Preview support Opera 132 footnote Preview browser support	Safari – No support Safari footnote footnote See bug 303995	Chrome Android – Preview support Chrome Android 148 (Release date: 2026-05-05) footnote Preview browser support	Firefox for Android – No support Firefox for Android footnote footnote See bug 2005072	Opera Android – No support Opera Android footnote No support	Safari on iOS – No support Safari on iOS footnote footnote See bug 303995	Samsung Internet – No support Samsung Internet footnote No support	WebView Android – Preview support WebView Android 148 (Release date: 2026-05-05) footnote Preview browser support	WebView on iOS – No support WebView on iOS footnote footnote See bug 303995

Tip: you can click/tap on a cell for more information.

In development. Supported in a pre-release version.: In development. Supported in a pre-release version.
No support: No support
: Experimental. Expect behavior to change in the future.
: See implementation notes.