Subtitles

Suggest Edits

As of v10.1.3, the PWX has added support for subtitles - currently supporting WebVTT format out of the box but this will get extended in the future.

At the moment, we are only extracting subtitles from HLS manifests (Dash support will be added later), and we are also supporting external subtitle tracks that can be added using the API.

The package that enables subtitles is SubtitlesPackage. It adds all needed packages that are required for handling subtitles. SubtitlesPackage is by default included with HlsBundle. Additionally you are able to extend the implementation to support your own format - we've covered basics how this can be achieved in template repository.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bitmovin Player Web X Demo</title>
  <script type="text/javascript" src="https://cdn.bitmovin.com/player/web_x/10/bundles/playerx-hls.js"></script>
  <style>
    #player-container {
      width: 95%;
      margin: 20px auto;
    }
    video {
      display: block;
    }
  </style>
</head>
<body>
  <div id="player-container"></div>

  <script type="text/javascript">
    const player = bitmovin.playerx.Player({
      key: 'YOUR-PLAYER-KEY',
      defaultContainer: document.getElementById("player-container"),
    });


    const sourceConfig = {
      resources: [{
        url: 'https://cdn.bitmovin.com/content/assets/sintel/hls/playlist.m3u8',
      }]
    };

    const sourceApi = player.sources.add(sourceConfig);

    sourceApi.events.on('subtitle-track-available', (event) => console.info('Subtitle available', event));
    sourceApi.events.on('subtitle-track-activated', (event) => console.info('Subtitle enabled', event));
    sourceApi.events.on('subtitle-track-deactivated', (event) => console.info('Subtitle enabled', event));
    sourceApi.events.on('subtitle-cue-parsed', (event) => console.info('Cue parsed', event));
    sourceApi.events.on('subtitle-cue-enter', (event) => console.info('Cue enter', event));
    sourceApi.events.on('subtitle-cue-exit', (event) => console.info('Cue exit', event));
    
    console.info('Subtitle tracks', sourceApi.subtitles.list);
  </script>
</body>
</html>

import {Player} from '@bitmovin/player-web-x/bundles/playerx-hls';

const player = Player({
  key: 'YOUR-PLAYER-KEY',
  defaultContainer: document.getElementById("player-container"),
});

player.packages.add(AnalyticsPackage)

const firstSourceConfig = {
  resources: [{
    url: 'https://cdn.bitmovin.com/content/assets/sintel/hls/playlist.m3u8',
  }]
}

const sourceApi = player.sources.add(sourceConfig);

sourceApi.events.on('subtitle-track-available', (event) => console.warn('Subtitle available', event));
sourceApi.events.on('subtitle-track-activated', (event) => console.warn('Subtitle enabled', event));
sourceApi.events.on('subtitle-track-deactivated', (event) => console.warn('Subtitle disabled', event));
sourceApi.events.on('subtitle-cue-parsed', (event) => console.warn('Cue parsed', event));
sourceApi.events.on('subtitle-cue-enter', (event) => console.warn('Cue enter', event));
sourceApi.events.on('subtitle-cue-exit', (event) => console.warn('Cue exit', event));

const subtitles = sourceApi.subtitles.list;

if (subtitles[0]) {
  sourceApi.subtitles.enable(subtitles[0])
}

Updated about 1 month ago