Npoplayer NPM | npm.io

NPO Player

The video player library for NPO and other broadcasters.

Installing

Install with NPM

npm install npoplayer

Import it into your project:

import 'npoplayer/src/scss/npoplayer.scss';
import NpoPlayer from 'npoplayer';
window.npoplayer = NpoPlayer;

Basic usage

let player = new npoplayer(container, playerConfig);
player.loadStream(jwt);

The parameters container, playerConfig, jwt passed to the functions need to be defined as below.

JWT

The player library makes use of the JSON Web Token (JWT) technology. More information about using JWT can be found at this website JWT.IO - JSON Web Tokens Introduction

Create your own unique JWT for each PRID

To be able to load your stream for any player you need to make use of a self generated JWT.

JWT header:

{
  "alg": "HS256",
  "typ": "JWT"
}

Payload:

{
    "prid": "<< PRID >>",
    "broadcaster": "<< YOUR BROADCASTER NAME",
    "clientIp": "<< IP FROM CLIENT >>",
    "age": "26"
}

Sign JWT:

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  your-256-bit-secret
)

Example of generated JWT:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

For every new request you make to the player library a new JWT needs to be sent to the NPO player library

Player Container

The player SDK needs to know within which container it should render its video and UI components. In this example a div-element is used with a unique id="my-player", which is the recommended approach in general.

<div id="my-player"></div>

Create a Player Configuration

A minimal player configuration requires the key property to be present, which expects a Player License Key. When served on localhost, no valid player license key is required to simplify development efforts.

let playerConfig = {
    key: '<< KEY >>'
};

You can however add optional values to customize the players' behaviour. For player events, (for now) you need to import it from the Bitmovin library with import {PlayerEvent} from "bitmovin-player";

let playerConfig = {
    key: '<< KEY >>',
    analytics: {
        key: '<< ANALYTICS KEY >>'
    },
    cast: {
        enable: true
    },
    playback: {
        muted: false,
        autoplay: true
    },
    events: {
      [PlayerEvent.SourceLoaded]: myFunc,
      [PlayerEvent.Play]: () => {
        // code to run when Play event is fired
      },
      [PlayerEvent.Error]: myErrorHandlingFunc
  },
};

Optional: Options

There are several options you can use for the players behaviour.

let options = {
  //properties
}

player.loadStream(jwt, options);

Available properties sourceConfig - object: used for defining information about the source fragments - object: used for defining and playing fragments endpoint - string: the endpoint used to get the stream-link

The following properties need to be added directly into the options object.

Source configuration The source configuration is used for defining information about the source like title, description, dash streamurl, hls streamurl, drm, subtitles, thumbnails etc. The configuration is created by the library but you can overwrite this by adding a custom config to the loadStream function

let options = {
  /* ... */
  sourceConfig: {
      title: 'Video title',
      description: 'Video description',
      poster: '<POSTER IMAGE URL>',
      thumbnailTrack: '<THUMBNAIL TRACK URL>',
      subtitleTracks: [{
        url: '<SUBTITLE TRACK URL>',
      }],
  }
};

player.loadStream(jwt, options);

Fragments If you want to load a fragment of a video or add sections you can use the fragments property:

let options = {
  /* ... */
  fragments: {
    sections: [{start: 500, end: 610, title: 'Section 1'}, {start: 610, end: 750, title: 'Section 2'}]
    startAtFragment: 2, // Default is first section
    startAtBeginOfFragment: true, // Default is false
    stopAtEndOfFragment: true, // Default is false
  }
}

player.loadStream(jwt, options);

Create a new Player Instance

Initiate a new player instance by providing it with a reference to the DOM element of your player-div and the player configuration object you defined earlier. Then load a video or stream with the generated JWT and an optional sourceConfig.

let container = document.getElementById('my-player');
let jwt = '<< OWN CREATED JWT >>';

let player = new npoplayer(container, options);
player.loadStream(jwt);