Getting started with the Web Player on PlayStation 5

A basic example for getting the Web Player running on a PlayStation 5.

Introduction

The Bitmovin Web SDK has been engineered to support a wide variety of platforms, including the PlayStation 5. After completing this tutorial you will be able to successfully run an application which is capable of playing back your streams on the PS5 through the Bitmovin Player.

You can find a list of all the other supported platforms on device and cross-browser support.

Platform overview

PlayStation 5 includes state of the art web capabilities that enable the Bitmovin Player to offer an incredibly wide set of features. The platform uses a WebKit-based browser engine that Sony actively maintains and keeps up-to-date. It supports the Media Source Extensions (MSE) and the Encrypted Media Extensions (EME) Web APIs that allow features like Adaptive Streaming with DASH and HLS, and playback of DRM-protected content.

In order for Bitmovin Player to offer its full playback capabilities, developers are required to go through the process of becoming a partner with Sony. For more information, please reach out to Sony through the PlayStation® Partners network.

Player setup

If you are new to using the Bitmovin Player Web SDK, the Web SDK - Getting Started Guide is the best place to start.

When it comes to running the player on PlayStation 5, the only additional step to do is to include the playstation5 module. This module contains several platform-specific fixes that contribute to the stability of the player and its performance on the device.

Here's how you can import the Bitmovin Player and the additional PS5 module in your HTML page:

<!-- Bitmovin Player -->
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>

<!-- PlayStation 5 Module -->
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/modules/bitmovinplayer-playstation5.js"></script>

The PS5 module then needs to be added to the player. Here's how you can achieve this:

// Adding the Playstation 5 module
bitmovin.player.Player.addModule(bitmovin.player.playstation5.default);

// Creating the Bitmovin Player
var player = new bitmovin.player.Player(container, playerConfig);

Note: the playstation5 module is only available on v8.88.0 and subsequent versions of the Player. It is recommended to always use the latest available version.

Configuration options

There are a few config options that might be useful when setting up the player to play content on PS5. These are optional, however some features may be unusable if these config options are not set accordingly, and errors may occur. For example, in order to successfully play back multiple videos at the same time, it is required to reduce the value of playmode from the default 4K to 2K.

Here's how you can achieve this using the player configs:

var playerConfig = {
  ...
  tweaks: { 
    playstation_5: { 
      playmode: '2K',
    },
  },
};

// Passing the config options during the Player instantiation
var player = new bitmovin.player.Player(container, playerConfig);

You can find more details regarding all the available PlayStation 5 Tweaks in the Documentation.

Playing DRM content

Bitmovin player on PlayStation 5 supports playback of DRM-protected content using PlayReady and Widevine.

PlayReady

In order to successfully get PlayReady streams to work, the following settings need to be provided through the SourceConfig options:

Example of platform-specific config for PlayReady:

var source = {
  dash: 'someurl.mpd',
  hls: 'someurl.m3u8',
  title: 'Some Nice Title',
  drm: {
    playready: {
      utf8message: true,
      plaintextChallenge: true,
      headers: {
        'Content-Type': 'text/xml',
      },
      // Only required if the license is persistent
      mediaKeySystemConfig: {
        sessionTypes: ['persistent-license'],
      },
    },
  },
};

// Passing the DRM-protected source to the player
player.load(source);

We do not support the License Acknowledgement feature of PlayReady. If this feature is enabled on the licensing server, it will cause the player to throw an error. However, if the license server returns unsigned license responses, it is possible to effectively work around the limitation by removing the <TransactionID> section from the body of the response.

Here's how you can achieve this:

function arrayBufferToBase64(arrayBuffer) {
  return btoa(String.fromCodePoint(...new Uint8Array(arrayBuffer)));
}

function base64ToArrayBuffer(base64) {
  const binaryString = window.atob(base64);
  const length = binaryString.length;
  const bytes = new Uint8Array(length);

  for (let i = 0; i < length; i++) {
    bytes[i] = binaryString.charCodeAt(i);
  }

  return bytes.buffer;
}

// Pre-process the license response using the Network API
var playerConfig = {
  ...
  network: {
    preprocessHttpResponse: (type, response) => {
      if (type === 'drm/license/playready') {
        response.body = base64ToArrayBuffer(btoa(atob(arrayBufferToBase64(response.body)).replace(/<TransactionID>.+<\/TransactionID>/, '')));
      }

      return Promise.resolve(response);
    },
  },
};

Widevine

Example of config for Widevine:

var source = {  
  dash: 'someurl.mpd',  
  hls: 'someurl.m3u8',  
  title: 'Some Nice Title',  
  drm: {  
    widevine: {  
      LA_URL: 'licenseurl.com/license/somelicenseid'
    },  
  },  
};

// Passing the DRM-protected source to the player  
player.load(source);

Known limitations

On PlayStation 5, we are able to guarantee most of the Bitmovin Player features. There are however a certain features that are unsupported. Here are the most important ones:

  • Playback of audio-only streams is not supported.
  • Client-side advertising with Google IMA is not supported (however, you can achieve the same features through the Bitmovin Advertising module, which works as expected).
  • Tweaking the playback rate during adaptive streaming playback via the player.setPlaybackSpeed API is disabled internally (it is treated as a no-op) because it can lead to unpredictable behaviors.
  • CMAF Low Latency is not supported because the platform lacks both support for Chunked-CMAF and playbackRate adjustments.
  • Media segments with more than 47 boxes before the mdat box will cause a MEDIA_ERROR_DECODE. Here you can find an example showing how to drop EMSG boxes from segments on PS5.