YouTip

## HTML Audio/Video DOM preload Property The `preload` property sets or returns whether the audio/video should be loaded as soon as the page loads. This property allows developers to provide a hint to the browser about what they believe will lead to the best user experience. However, please note that this attribute is only a hint and may be ignored by the browser under certain conditions (such as on mobile devices to save data, or when data-saver mode is enabled). --- ## Syntax ### Get the preload property: ```javascript let preloadValue = audioOrVideo.preload; ``` ### Set the preload property: ```javascript audioOrVideo.preload = "auto" | "metadata" | "none"; ``` --- ## Property Values | Value | Description | | :--- | :--- | | `auto` | Hints to the browser that it should load the entire audio/video file immediately when the page loads. | | `metadata` | Hints to the browser that it should only load the metadata (such as duration, dimensions, and tracks) when the page loads, rather than the actual media content. | | `none` | Hints to the browser that it should not load any part of the audio/video file when the page loads. The media will only start downloading when the user clicks play. | --- ## Technical Details | Feature | Description | | :--- | :--- | | **Return Value** | A String representing the preload behavior: `"auto"`, `"metadata"`, or `"none"`. | | **Default Value** | Browser-dependent (typically `"metadata"` or `"auto"` depending on the browser and network conditions). | | **DOM Level** | HTML5 | --- ## Code Examples ### Example 1: Setting the preload property to "auto" This example configures the video element to start buffering/loading the video file as soon as the page is loaded. ```html ``` ### Example 2: Getting the current preload state You can read the current `preload` state of a media element using JavaScript: ```javascript const myVid = document.getElementById("myVideo"); console.log("Current preload setting: " + myVid.preload); ``` --- ## Browser Compatibility The `preload` property is supported by all modern web browsers: * Google Chrome * Mozilla Firefox * Microsoft Edge / Internet Explorer 9+ * Safari * Opera ### Important Considerations: 1. **Mobile Browsers:** Most mobile browsers (iOS Safari, Chrome for Android, etc.) ignore the `preload` property or default it to `none` to prevent excessive cellular data usage and preserve battery life. 2. **Autoplay Interaction:** If the `autoplay` attribute is present on the media element, it will override the `preload` setting, and the browser will immediately begin downloading and playing the media.