Configure preload and CORS settings

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> 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.

1
<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():

1
// on hover, or when the row scrolls into view
2
const player = document.createElement("fastpix-player");
3
player.setAttribute("playback-id", lesson.playbackId);
4
player.setAttribute("token", lesson.token);        // for private playback
5
player.setAttribute("stream-type", "on-demand");
6
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:

1
player.hls.config.maxBufferLength = 10;   // buffer ~10s, then hold
2
// ...once ~10s is buffered:
3
player.hls.stopLoad();
4
// when the user opens the lesson:
5
player.hls.config.maxBufferLength = 30;
6
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.

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.

1
<fastpix-player 
2
  playback-id="{Playback_id}" 
3
  crossorigin="anonymous" 
4
></fastpix-player>

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

1
<fastpix-player 
2
  playback-id="{Playback_id}" 
3
  crossorigin="use-credentials" 
4
></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:

1
<fastpix-player 
2
  playback-id="{Playback_id}" 
3
  preload="metadata" 
4
  crossorigin="use-credentials" 
5
></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, the preload value applies only on the native-HLS path.