About

The SRGLetterbox JavaScript library defines the official SRG SSR media player experience, packed into a single library, providing:

Support of audio and video on-demand, live, DVR and DRM streams.
Access to all SRG SSR business unit medias.
A consistent API for tuning the player experience.
Support for chapter and segment browsing and selection.
AirPlay, picture in picture and Chromecast support.
All SRG SSR analytics for media playback.
Diagnostic informations (SRG Snitch).

Features

For more details, please refer to the features page. You can find the SRGLetterbox documentation on the website.

Quick Start

Check out the Examples page for more advance examples.

Installation through NPM

Letterbox uses the GitHub NPM registry, that means in order to be able to install the Letterbox package you must have a Personal access tokens.

Generate your Personal access tokens :

Go to Settings / Developer settings
Click Generate new token
Fill the Note field with LBW integration or whatever name fits you
Give the rights read:packages then click Generate token
Copy the Personal access tokens

Edit/Create the .npmrc file from your Home folder and add the following :

//npm.pkg.github.com/:_authToken=Replace with the generated token
@srgssr:registry=https://npm.pkg.github.com

At this stage, you should be able to install the Letterbox NPM package.

NB: Please consider using NPM instead of Yarn as the integration with the GitHub NPM registry is seamless and don't require any additional configuration.

Installation through the CDN

The CDN offers two options for integrating Letterbox. All you have to do is copy/paste the js and css URLs into your project.

Using latest version of Letterbox. Be aware that this may break your integration in the case of a major update.
- CSS :
```
https://letterbox-web.srgssr.ch/production/letterbox.css
```
- JavaScript :
```
https://letterbox-web.srgssr.ch/production/letterbox.js
```
Using a specific version of Letterbox. The CDN only supports major and minor versions. Each patch will be automatically applied to the minor version.
- CSS :
```
https://letterbox-web.srgssr.ch/v/3.26/letterbox.css
```
- JavaScript :
```
https://letterbox-web.srgssr.ch/v/3.26/letterbox.js
```

Example

Create an index.html file

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Letterbox player</title>
    <style>
        html,
        body {
            height: 100vh;
            margin: 0;
            padding: 0;
        }

        .lbw-container {
            width: 100vw;
            height: 100vh;
        }
    </style>
    <link rel="stylesheet" href="https://letterbox-web.srgssr.ch/v/3.26/letterbox.css">
</head>

<body>
    <div class="lbw-container"></div>

    <script type="module">
        import 'https://letterbox-web.srgssr.ch/v/3.26/letterbox.js';

        const letterbox = new SRGLetterbox({
            container: '.lbw-container'
        });

        letterbox.loadUrn('urn:swi:video:47868616');
    </script>
</body>

</html>

The SRGLetterbox also accepts options through the constructor:

const options = {
      analytics: true,
      container: undefined,
      chromeCastReceiver: '1AC2931D',
      debug: false,
      endScreenPlaylist : false, //must be an array of 18 items
      fillMode: true,
      ilHost: 'il.srgssr.ch',
      language: 'en',
      nextEpisodeRecommendation: false,
      noUI: false,
      playerFocus: undefined,
      recommendations: true,
      storageNamespace: 'srgssr/letterbox/userStorage',
      tagCommanderScriptURL: '//colibri-js.akamaized.net/penguin/tc_SRGGD_11.js',
      userReport: {
        errors: [
            'ERROR_BLOCKING_REASON_GEOBLOCK',
            'ERROR_BLOCKING_REASON_UNKNOWN',
            'ERROR_UNKNOWN',
        ],
        emailTo: undefined,
      },
      components: {
        controlBar: true,
        header: true,
        sharing: true,
        title: true,
        thumbnails: true,
        playButton: true,
        subdivisions: true,
      },
      audioTrackLanguage: {
        default: false,
        storage: true,
      },
      autoplay: {
        default: false,
        storage: true,
      },
      continuousPlayback: {
        default: true,
        storage: true,
      },
      hd: {
        default: true,
        storage: true,
      },
      muted: {
        default: false,
        storage: true,
      },
      playbackRate: {
        default: 1,
        storage: true,
      },
      textTrackLanguage: {
        default: false,
        storage: true,
      },
      textTrackSizeLevel: {
        default: 1,
        storage: true,
      },
      volume: {
        default: 1,
        storage: true,
      },
    };

const letterbox = new SRGLetterbox(options);

Resources

Letterbox web demo can be used to test different features and custom configurations.

To contact the team, you can use the dedicated Slack channel or by e-mail.

Home