Skip to main content

Player Configuration

To configure the player implementation to be used in Elevate web, you need to register the player in the file PlayerConfig.ts and adjust the type for the Player to get better completion from typescript.

Register a player​

Add a new entry inside the registeredPlayers array. The order of this array is important. The player used to play a given media will depend on the first player has support for the video type.

export const registeredPlayers: PlayerEntry[] = [
  {
    playerClass: HlsjsPlayer,
  },
  {
    // Shaka will never play hls content as it is first
    // caught by HlsjsPlayer
    playerClass: ShakaPlayer,
  },
];

Define the player type​

Assign a class, union of classes or the PlayerClass interface to the Player variable here will update the value of the GenericPlayer variable inside the player component.

Setting this value as closed to your requirements will make it easier to work with typescript within the player component.

// Most general type
declare const Player: PlayerClass;

// Use union of the possible players
declare const Player: typeof ShakaPlayer | typeof HlsjsPlayer;

// Use specific implementation
const Player = ShakaPlayer;
info

You don't need to assign a value to Player variable if you use the keyword declare. This is useful for setting the variable to a type like PlayerClass interface that otherwise cannot be assign as it is not an actual object.

For more information check the typescript documentation: https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html