Skip to main content

Shaka Player

The Shaka player is a class that implements the generic Player Interface and uses the shaka-player module internally for managing the playback.

Usage

Create Player​

The Shaka player can be created by instantiating a new instance of the ShakaPlayer class:

import { ShakaPlayer } from '@/features/ShakaPlayer/ShakaPlayer';

...

const player = new ShakaPlayer();

Setup​

Use the method init to initialize the the underlaying instance to the shaka-player library and to provide a reference for the video.

// You can use an id to find the video element
await player.init({ playerId: 'idToVideoElement' });
// Or pass a reference to the video element
await player.init({ videoEl: videoRef.current });

At this point you can add any required event listener or get a reference to the internal objects.

player.addEventListener('onload', () => console.log('Loaded'));
const shakaInstance = player.getPlayer();

Load Content​

Use the load method to load a stream.

const loadConfig = {
  url,
  drm: {
    type: DRMType.WIDEVINE,
    licenseUrl,
    headers: {
      license: httpRequestHeaders,
    },
  },
  playerConfig: { // Shaka specific config
    streaming: {
      bufferingGoal: 120,
    },
  },
};
await player.load(loadConfig);
note

The playerConfig property is of the type of the specific shaka config. See shaka.extern.PlayerConfiguration for more information about the type.

info

You can configure the DRM in drm and playerConfig (shaka specific), however the drm property will take precedence if both are provided. You may want to stick to drm as it is standard across player implementations due to being part of the player interface.

Disposing the player​

To dispose the player and its resources use the dispose method.

await player.dispose();
// Player resources are now cleared!

The player can be now safely disposed or set its reference to null/undefined to be garbage collected.

You can no longer use the player reference unless you call init again if you wish to reuse the player.