Preload attribute for video assets

Using the HTML preload attribute for video files creates no-JavaScript pre- or lazy-loading those assets.
auto (default) tells the browser to start downloading the asset immediately.
none tells the browser NOT to start downloading the asset immediately, but wait until the asset is nearly within the viewport.
metadata tells the browser to download ONLY the asset’s metadata (length, etc.), and wait until the asset is nearly within the viewport to download it.
Note that metadata is NOT implemented consistenly across browsers, so it may download more than just metadata.

Demo
HTML
CSS
JS
Baseline
CodePen

Demo

HTML

<!-- Single source -->
<video 
  src="video.mp4" 
  width="400"
  height="200"
  controls
  playsinline
  preload="auto">
</video>

<br>

<!-- Multiple sources -->
<video 
  width="400"
  height="200"
  controls
  playsinline
  preload="auto">
  <source src="video.webm" type="video/webm" />
  <source src="video.mp4" type="video/mp4" />
  <p>
    Your browser does not support this feature. Download the <a href="video.webm" download="video.webm">WEBM</a> or <a href="video.mp4" download="video.mp4">MP4</a> video.
  </p>
</video>

CSS

No special CSS required.

JS

No JS required.

Baseline

[`video`](https://webstatus.dev/features/video)

CodePen

See the Pen on CodePen.