Skip to main content
Version: 4.2.x

xdk-players-contrib

@accedo/xdk-players-contrib​

The home of the XDK players modules contributed by Accedo developers.

An XDK player module is anything that extends the XDK default capabilities and can be imported in the device configuration and loaded from the XDK SDK on the client-side to execute any action

Installation​

$ npm i @accedo/xdk-players-contrib
# Install any required peer dependencies
$ npm i hlsjs
$ npm i shaka
$ npm i vtt.js
$ npm i whatwg-fetch # for device without fetch

Module named exports​

  • {IDS} exports
  • SHAKA
  • HLSJS
  • players exports
  • shaka -> shaka config
  • hlsjs -> hlsjs config
  • extensions exports
  • vtt -> vtt external subtitle config
  • ttml -> ttml external subtitle config

Usage​

Player​

Import the desired player into your xdk.config.js file

import workstation, { ID as WORKSTATION } from '@accedo/xdk-device-workstation';
import { shaka, hlsjs } from '@accedo/xdk-players-contrib';

export default {
  devices: {
    packages: [workstation.addPlayer(shaka).addPlayer(hlsjs)]
  }
};

Now the player will be available for when you try to play content.

Extension​

You will need to create a player config and set it to the desired device

mport { PlayerConfig } from '@accedo/xdk-config';
import { vtt } from '@accedo/xdk-players-contrib';
const ID = 'html5adds'

const html5adds = new PlayerConfig({
  id: ID,
  importer: () => import(`@accedo/xdk-base-modules/esm/player/HTML5Player.js`),
  extensions: [
    vtt
  ]
});

export default html5adds;

On your xdk.config.js

import workstation from '@accedo/xdk-device-workstation';
import HTML5PlayerConfig from `local/module`;

export default {
  devices: {
    packages: [
      workstation
        .removeAllPlayers() // remove any player from the config
        .addPlayer(HTML5PlayerConfig)
    ]
  }
};

Create a media with a specific player​

import xdk, * as XDK from '@accedo/xdk-core';
import { IDS } from '@accedo/xdk-players-contrib';
const { HLSJS } = IDS;
// after xdk load
let hlsjs;

try {
  hlsjs = await xdk.mediaManager.getMedia(HLSJS);
} catch (e) {
  // this one without capture the error
  hlsjs = await xdk.mediaManager.createMedia(HLSJS);
}

hlsjs.load(`url`, {});
hlsjs.play();

Creating your player​

If you want to create a new XDK player, please follow the following folder structure and steps

src/
  index.js              // exports all the players and player extensions
  players/              // player implementations
    index.js            // exports extension ID and implementations
      player/           // player implementation
      extension/
        extension.js    // specific player extension
      config.js;        // player configuration ready to be used on xdk.config.js
      id.js             // specific player id
      index.js;         // Export player configuration and ID
      player.js;        // player implementation
  subtitles/            // common subtitles extension
  audio/                // common audio extension