Transloadit

What is Video Preload?

Video preload is a hint that tells a browser or player how much of a media resource to fetch before the viewer starts playback. On the HTML video element, the preload attribute accepts none, metadata, or auto, and the browser may ignore it.

How Video Preload works

The HTML Standard defines preload on audio and video elements as a hint with three keywords. none signals that the author does not expect the viewer to need the media, or that the server wants to minimize unnecessary traffic. metadata signals that fetching dimensions, track list, and duration, and possibly the first few frames, is reasonable. auto, or the attribute with an empty value, lets the browser put the viewer first, up to optimistically downloading the entire resource. When the attribute is missing or invalid, the default is implementation-defined, and the standard suggests the metadata behavior. A browser may ignore the hint altogether, for example because of explicit user preferences or the available connectivity. The value can be changed after loading has started, so a page with many videos can ship none and switch a player to auto once the viewer presses play.

Key facts

  1. The values are hints, not byte budgets. With metadata, the HTML Standard says a browser will typically obtain some frames in addition to dimensions, track list, and duration; with auto it may download the entire file. No value caps the transfer, so measure the requests each target browser makes before play.
  2. The effective behavior can differ from the markup. autoplay can override preload when the browser permits autoplay, because a video that plays has to buffer regardless of the hint, and browsers apply their own policy. Chromium’s media element source, as read in October 2026, downgrades auto to metadata on cellular connections and treats none as metadata once a script calls the element’s load() method. Published rule lists go stale: the Data Saver rule in web.dev’s preload article is not in that source.
  3. The attribute does not control players built on Media Source Extensions, such as hls.js, because the application fetches the media and appends it to the element itself. Use the player’s own setting. By default, hls.js loads the quality-level playlist and first fragments automatically once the manifest is parsed; with autoStartLoad set to false, that loading waits for a startLoad() call. In both cases loadSource() requests the manifest, which hls.js parses into the available quality levels and tracks. To request nothing from the stream before play, delay loadSource() as well.
  4. Browsers may request a media file in byte ranges; the HTML Standard leaves the choice of range to the implementation. In a non-fragmented MP4 the index is usually written at the end of the file unless the encoder moved it to the start, as FFmpeg’s faststart option does, so reading it without transferring everything before it depends on the server answering Range requests with 206 Partial Content. HTTP allows a server to ignore Range and send the whole file.
  5. preload="none" does not stop the poster from loading. The HTML Standard fetches the poster image when the element is created or its poster attribute changes, independently of preload. The standard’s loading="lazy" attribute is what defers both the poster and the preload behavior until the element approaches the viewport, and only when scripting is enabled; confirm that your target browsers implement it for video.

When Video Preload matters

Set preload explicitly, because the default differs between browsers. none suits pages where playback is unlikely or many videos are listed, metadata suits players that need duration and dimensions before play, and auto suits a video the viewer is expected to watch, at the cost of transferring media that may never be played.

How Transloadit helps with Video Preload

Preload is decided by the browser or player at playback time, so it is not a Transloadit setting. Transloadit prepares the files a player loads: the /video/thumbs Robot extracts images from a video for use as previews, which can supply the poster a player shows before any media has been fetched.

Set the preload value in your own markup or player configuration, and choose which extracted frame to publish as the poster.

Explore Transloadit’s delivery capabilities

Sources

Turn media knowledge into a working pipeline

Connect uploads, processing, AI, storage, and delivery through one declarative API — with the encoding stack, scaling, and format churn handled for you.

Try Transloadit for free