> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://fastpix.com/docs/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://fastpix.com/docs/_mcp/server.

# Configure preload and CORS settings

> Control video load behavior and CORS policy with preload and crossorigin for secure playback.

Control video load behavior and CORS policy with preload and crossorigin for secure playback.

When you embed video in a web application, the `preload` and `crossorigin` attributes help you control loading behavior, security, and the overall viewing experience. This page explains what each attribute does, the values it accepts, and when to use them.

\


## Preload the video

The `preload` attribute is forwarded to the underlying [HTML `<video preload>`](https://developer.mozilla.org/docs/Web/HTML/Element/video#preload) element. It accepts `none`, `metadata` (the default), and `auto`, and it tells the browser how much to fetch before playback begins.

> **NOTE** \
> `preload` doesn't control buffering for HLS playback. FastPix delivers HLS, which on most browsers is driven by hls.js. hls.js starts fetching the manifest and first segments as soon as the source is attached and never reads `video.preload`, so the attribute has no effect there. It's honored only on the native-HLS path (iOS Safari), where the browser loads the stream itself.
>
> `preload` also can't help before the player exists. Loading starts when `<fastpix-player>` is added to the DOM, so setting the attribute on an element you haven't created yet does nothing. To remove the startup delay when a viewer opens a video, see [Start playback instantly](#start-playback-instantly).

| Value      | Effect                                                                                                                                                                                                              |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `none`     | Native-HLS path: nothing is fetched until playback starts. hls.js path: no effect.                                                                                                                                  |
| `metadata` | Native-HLS path: only enough is fetched to read the duration, dimensions, and tracks. hls.js path: no effect. This is the default, and it's also used when the attribute is absent or set to an unrecognized value. |
| `auto`     | Native-HLS path: the browser may fetch ahead for faster startup. hls.js path: no effect.                                                                                                                            |

```jsx
<fastpix-player preload="metadata" playback-id="{Playback_id}"></fastpix-player>
```

\


### Start playback instantly

On a listing page, such as a course with lessons, a video grid, or a feed, a click usually shows a loader for a second or two. That delay is the manifest fetch, the token check, and the first segments, all happening after the click, because the player was created by the click.

The player starts loading the moment it's added to the DOM. Create the element before the click, so the click only has to call `play()`:

```js
// on hover, or when the row scrolls into view
const player = document.createElement("fastpix-player");
player.setAttribute("playback-id", lesson.playbackId);
player.setAttribute("token", lesson.token);        // for private playback
player.setAttribute("stream-type", "on-demand");
tile.appendChild(player);                          // loading starts here
```

Set every attribute before you append the element, and create the player inside the element it will play in. Moving a player in the DOM tears it down and discards what it has buffered.

Warming a player lets it buffer normally, up to about 2 minutes, which is wasteful on a long list. Cap the buffer, then release the cap when the viewer opens the video:

```js
player.hls.config.maxBufferLength = 10;   // buffer ~10s, then hold
// ...once ~10s is buffered:
player.hls.stopLoad();
// when the user opens the lesson:
player.hls.config.maxBufferLength = 30;
player.hls.startLoad();
```

`player.hls` isn't available on the native-HLS path (iOS Safari). There, the browser manages the buffer and no cap is applied.

For a runnable comparison of creating the player on click, on hover, and on page load, with the measured time-to-first-frame for each, see the [course-page-instant-play demo](https://github.com/FastPix/web-player-component/blob/main/demo/course-page-instant-play.html).

\


## Use crossorigin

The `crossorigin` attribute is used to handle the CORS (Cross-Origin Resource Sharing) settings for your video. This attribute ensures that the browser requests the video in a manner that adheres to the specified CORS policy, which is essential for accessing media files from different origins.

**Possible values:** `anonymous`, `use-credentials`.

\


**anonymous**: Sends a CORS request without credentials (e.g., cookies, X.509 certificates, etc.). This is the default value if the attribute is not set. It allows for cross-origin sharing of the resource without exposing user-specific data.

```jsx
<fastpix-player 
  playback-id="{Playback_id}" 
  crossorigin="anonymous" 
></fastpix-player>
```

\


**use-credentials**: Sends a CORS request with credentials, allowing access to resources that require authentication or user-specific data.

```jsx
<fastpix-player 
  playback-id="{Playback_id}" 
  crossorigin="use-credentials" 
></fastpix-player> 
```

\


### Some considerations for using crossorigin

* Use `anonymous` unless the video requires credentials for access.
* Ensure the server hosting the video is set up to handle CORS requests correctly.

\


## Combine preload and crossorigin

Using these attributes together, you can optimize both the loading performance and security of your video content.

**For instance**:

```jsx
<fastpix-player 
  playback-id="{Playback_id}" 
  preload="metadata" 
  crossorigin="use-credentials" 
></fastpix-player> 
```

\


In this example, the player includes credentials in the cross-origin request, which suits protected video that requires authentication. As noted in [Preload the video](#preload-the-video), the `preload` value applies only on the native-HLS path.