Video preload and crossorigin

When embedding video content in your web application, it's crucial to understand and effectively use the preload and crossorigin attributes to enhance the performance, security, and overall user experience of your media content. Below, you will find a explanation of these attributes, including their possible values, usage scenarios, and practical examples.

Preloading the video

The preload attribute hints to the browser how much of the video should be loaded before playback begins. This can greatly influence the performance and user experience, especially on networks with varying speeds. Possible values: none, metadata, auto

none: Indicates that the video should not be preloaded. This is useful if you want to save bandwidth for users who may not watch the video.

<fp-player 
  playback-id="{Playback_id}" 
  thumbnail-time="30" 
  preload="none" 
></fp-player> 

metadata: Only the metadata (such as length, dimensions, and first frame) of the video is fetched. This is a good compromise between saving bandwidth and providing some information about the video.

<fp-player 
  playback-id="{Playback_id}" 
  thumbnail-time="30" 
  preload="metadata" 
></fp-player> 

auto: The entire video can be downloaded, even if the user might not watch it. This ensures that the video is ready for playback without delay.

<fp-player 
  playback-id="{Playback_id}" 
  thumbnail-time="30" 
  preload="auto" 
></fp-player> 

Some considerations for preloading

• Preloading large video files on slow connections can increase page load times for other resources.
• If users are unlikely to view the video, preloading might waste bandwidth.

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

<fp-player 
  playback-id="{Playback_id}" 
  thumbnail-time="30" 
  crossorigin="anonymous" 
></fp-player>

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

<fp-player 
  playback-id="{Playback_id}" 
  thumbnail-time="30" 
  crossorigin="use-credentials" 
></fp-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.

Combining preload and crossorigin

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

For instance:

<fp-player 
  playback-id="{Playback_id}" 
  thumbnail-time="30" 
  preload="metadata" 
  crossorigin="use-credentials" 
></fp-player> 

In this example, the browser will preload only the video metadata and include credentials in the cross-origin request, which is suitable for protected video content that requires authentication.