HTML Video Preload Metadata vs Auto vs None

A photo, chart, or recording can explain an idea faster than a paragraph, but only if people can actually use it.

What You Need to Know

Preload=none asks the browser to wait, metadata requests basic information, and auto permits more eager fetching. These are hints, so test the network activity rather than assuming exact behavior.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<video controls preload="none" width="640" poster="images/lesson-cover.jpg">
    <source src="media/lesson.mp4" type="video/mp4">
    Video is unavailable.
</video>

Let’s Read the Code

<video>: The video element creates a video player and can include alternative formats.
<source>: A source points to a media file or image choice with a type or other condition.
controls: Controls asks the browser to provide its native audio or video player controls.
preload: Preload hints how much media to fetch before playback.

What the example shows: Preload=none asks the browser not to prefetch media just to prepare playback; metadata and auto are different hints.

What Happens in the Browser?

The paths shown here refer to files in your own example project. Put real images and recordings in those locations before expecting them to load.

What if the resource is missing? Test the page with the media path temporarily broken. The surrounding text should still explain the important idea, and controls should remain understandable. This is especially important for slow connections and accessibility.

Your Turn

Replace the media filename with your own local recording and check playback, controls, and fallback content.

Common Beginner Mistakes

Forgetting that captions are stored in a separate timed-text file, not generated by the video tag.
The browser and network conditions ultimately determine how much is downloaded.

Key Takeaways

Preload=none asks the browser to wait, metadata requests basic information, and auto permits more eager fetching.
<video>: The video element creates a video player and can include alternative formats.
If the resource cannot load, users still need enough text to understand what was meant to be there.