bigscreen-player

Simplified media playback for bigscreen devices.

Introduction

Bigscreen Player is an open source project developed by the BBC to simplify video and audio playback on a wide range of 'bigscreen' devices (TVs, set-top boxes, games consoles, and streaming devices).

Getting Started

$ npm install

Initialisation

A playback session can be initialised by simply calling the init() function with some initial data.

The player will render itself into a supplied parent element, and playback will begin as soon as enough data has buffered.

import { BigscreenPlayer, MediaKinds, WindowTypes } from 'bigscreen-player'

// configure the media player that will be used before loading
// see below for further details of ths config

// options are: msestrategy, nativestrategy, hybridstrategy
window.bigscreenPlayer.playbackStrategy = 'msestrategy'

const bigscreenPlayer = BigscreenPlayer()
const playbackElement = document.createElement('div')
const body = document.getElementByTagName('body')[0]

playbackElement.id = 'BigscreenPlayback'
body.appendChild(playbackElement)

const minimalData = {
  media: {
    type: 'application/dash+xml',
    urls: [
      {
        url: 'https://example.com/video.mpd'
      }
    ]
  }
}

const optionalData = {
  initialPlaybackTime: 0, // Time (in seconds) to begin playback from
  media: {
    type: 'application/dash+xml',
    kind: MediaKinds.VIDEO, // Can be VIDEO, or AUDIO
    urls: [
      // Multiple urls offer the ability to fail-over to another CDN if required
      {
        url: 'https://example.com/video.mpd',
        cdn: 'origin' // For Debug Tool reference
      }, {
        url: 'https://failover.example.com/video.mpd',
        cdn: 'failover'
      }
    ],
    captions: [{
      url: 'https://example.com/captions/$segment$', // $segment$ required for replacement for live subtitle segments
      segmentLength: 3.84, // Required to calculate live subtitle segment to fetch & live subtitle URL.
      cdn: 'origin' // Displayed by Debug Tool
    }, {
      url: 'https://failover.example.com/captions/$segment$',
      segmentLength: 3.84,
      cdn: 'failover'
    }
    ],
    captionsUrl: 'https://example.com/imsc-doc.xml', // NB This parameter is being deprecated in favour of the captions array shown above.
    subtitlesRequestTimeout: 5000, // Optional override for the XHR timeout on sidecar loaded subtitles
    subtitleCustomisation: {
      size: 0.75,
      lineHeight: 1.10,
      fontFamily: 'Arial',
      backgroundColour: 'black' // (css colour, hex)
    },
    playerSettings: { // This currently can be used to customise settings for the msestrategy. It is a pass through of all the dash.js player settings.
      failoverSort: failoverSort, // Post failover custom sorting algorithm
      failoverResetTime: 60000,
      streaming: {
        bufferToKeep: 8
      }
    }
  }
}

// STATIC for VOD content, GROWING/SLIDING for LIVE content
const windowType = WindowTypes.STATIC
const enableSubtitles = false

bigscreenPlayer.init(playbackElement, optionalData, windowType, enableSubtitles)

Configuration

Bigscreen Player has some global configuration that is needed before initialisation. A playback strategy may be configured, or defaulted to the native Html5 strategy:

window.bigscreenPlayer.playbackStrategy = 'msestrategy' // OR 'nativestrategy' OR 'hybridstrategy'

See the configuration wiki page for further details on these strategies.

Reacting to state changes

State changes which are emitted from the player can be acted upon to by registering a callback. The callback will receive all of the following state changes as the state property of the event:

• MediaState.STOPPED
• MediaState.PAUSED
• MediaState.PLAYING
• MediaState.WAITING
• MediaState.ENDED
• MediaState.FATAL_ERROR

State changes may be registered for before initialisation and will automatically be cleared upon tearDown() of the player.

const bigscreenPlayer = BigscreenPlayer()

// The token is only required in the case where the function is anonymous, a reference to the function can be stored and used to unregister otherwise.
var stateChangeToken = bigscreenPlayer.registerForStateChanges(function (event) {
  if(event.state == MediaState.PLAYING) {
    console.log('Playing')
    // handle playing event
  }
})

bigscreenPlayer.unregisterForStateChanges(stateChangeToken)

Reacting to time updates

Time updates are emitted multiple times a second. Your application can register to receive these updates. The emitted object contains the currentTime and endOfStream properties.

Time updates may be registered for before initialisation and will automatically be cleared upon tearDown() of the player.

var bigscreenPlayer = BigscreenPlayer();

// The token is only required in the case where the function is anonymous, a reference to the function can be stored and used to unregister otherwise.
var timeUpdateToken = bigscreenPlayer.registerForTimeUpdates(function (event) {
    console.log('Current Time: ' + event.currentTime);
});

bigscreenPlayer.unRegisterForTimeUpdates(timeUpdateToken);

Reacting to subtitles being turned on/off

This is emitted on every setSubtitlesEnabled call. The emitted object contains an enabled property.

This may be registered for before initialisation and will automatically be cleared upon tearDown() of the player.

var bigscreenPlayer = BigscreenPlayer();

// The token is only required in the case where the function is anonymous, a reference to the function can be stored and used to unregister otherwise.
var subtitleChangeToken = bigscreenPlayer.registerForSubtitleChanges(function (event) {
    console.log('Subttiles enabled: ' + event.enabled);
});

bigscreenPlayer.unregisterForSubtitleChanges(subtitleChangeToken);

Creating a plugin

Plugins can be created to extend the functionality of the Bigscreen Player by adhering to an interface which propagates non state change events from the player. For example, when an error is raised or cleared.

The full interface is as follows:

• onError
• onFatalError
• onErrorCleared
• onErrorHandled
• onBuffering
• onBufferingCleared
• onScreenCapabilityDetermined

An example plugin may look like:

function ExamplePlugin (appName) {

  var name = appName;

  function onFatalError (evt) {
    console.log('A fatal error has occured in the app: ' + name);
  }

  function onErrorHandled (evt) {
    console.log('The ' + name + ' app is handling a playback error');
  }

  return {
    onFatalError: onFatalError,
    onErrorHandled: onErrorHandled
  };
}

var bigscreenPlayer = BigscreenPlayer();

var examplePlugin = ExamplePlugin('myApp');

bigscreenPlayer.registerPlugin(examplePlugin);

// initialise bigscreenPlayer - see above

// you should unregister your plugins as part of your playback cleanup

// calling with no argument will unregister all plugins
bigscreenPlayer.unregisterPlugin(examplePlugin);

Testing

The project is unit tested using Jest. To run the tests:

$ npm test

This project currently has unit test coverage but no integration test suite. This is on our Roadmap to address.

Mocking media playback

When writing tests for your application it may be useful to use the mocking functions provided. This creates a fake player with mocking hook functions to simulate real world scenarios.

See here for example usage.

Releasing

1. Create a PR.

2. Label the PR with one of these labels:

   • semver prerelease
   • semver patch
   • semver minor
   • semver major

3. Get a review from the core team.

4. If the PR checks are green. The core team can merge to master.

5. Automation takes care of the package versioning.

6. Publishing to NPM is handled with our GitHub Actions CI integration.

API Reference

The API is documented here.

Contributing

See CONTRIBUTING.md

License

Bigscreen Player is available to everyone under the terms of the Apache 2.0 open source license. Take a look at the LICENSE file in the code for more information.