What is the preload attribute in HTML5?
Preload is an attribute of the HTML5 video tag. The preload attribute lets the developer advise the browser how much of the video should be preloaded prior to viewing. There are 3 values for the preload attribute:
- None: preload=none tells the browser that there is a video, but to download 0 bytes of the file. This clearly saves data, but at the cost of a delayed video startup - there is no video stored locally on the device.
- metadata: preload=metadata tells the browser to download a percentage of the video (typically 2-5% of the file) to get metadata (size, bitrate, etc. from the video, as well as have a bit of teh video ready for immediate playback. IF preload is not set, the default setting is metadata
- auto: preload=auto tells the browser to download the entire video. This is the most data intensive, but results in full playback of the video when the video playback has started. If the preload attribute is not assigned a value, the auto selection is used
preload=autois a suggestion that the entire file can be downloaded, but the browser may have a different algorithm and download a larger percentage than
preload=metadatainstead of the entire file.
Note: The autoplay attribute takes precedence over preload. For example, in the following video tag:
<video src=myvideo.mp4 preload=none autoplay>
the browser will download the entire video.
Preload at api.video
Preload is not typically used with streaming video, as the video player can adapt playback based on network conditions - giving a more nuanced approach to video download.