Adding external subtitle tracks

Usually, subtitle tracks are included in the manifest of your content (see Enconding Manifests API for more information). If they are provided this way, the player recognizes them and shows them in the subtitles selection menu without any further configuration.

Otherwise, it is also possible to add external tracks via the Subtitle API:

import { Platform } from 'react-native';
import {
  SourceConfig,
  SourceType,
  SubtitleFormat,
} from 'bitmovin-player-react-native';

// Source config with an external subtitle track.
const config: SourceConfig = {
  url:
    Platform.OS === 'ios'
      ? 'https://bitmovin-a.akamaihd.net/content/sintel/hls/playlist.m3u8'
      : 'https://bitmovin-a.akamaihd.net/content/sintel/sintel.mpd',
  type: Platform.OS === 'ios' ? SourceType.HLS : SourceType.DASH,
  poster: 'https://bitmovin-a.akamaihd.net/content/sintel/poster.png',
  // External subtitle tracks list to be added to this source.
  subtitleTracks: [
    // You can select 'Custom English' in the subtitles menu.
    {
      // The URL of the subtitle file. Required.
      url: 'https://bitdash-a.akamaihd.net/content/sintel/subtitles/subtitles_en.vtt',
      // External file format.
      // Supports `.vtt`, `.ttml` and `.cea` extensions.
      //
      // This option can be left empty since the player automatically recognizes the format
      // from the provided url most of the time.
      format: SubtitleFormat.VTT,
      // Label for this track shown under the selection menu. Required.
      label: 'Custom English',
      // The IETF BCP 47 language tag associated with this track. Required.
      language: 'en',
      // The unique identifier used for this track.
      // The default value for this options is a randomly generated UUID.
      identifier: 'sub1',
      // This track is considered the default if set to `true`.
      // The default value for this option is `false`.
      isDefault: false,
      // If set to `true` it means that the player should automatically select and switch this
      // subtitle according to the selected audio language. Forced subtitles do not appear in
      // `Player.getAvailableSubtitles`.
      //
      // The default value for this option is `false`.
      isForced: false,
    },
    // You may add even more tracks to the list...
  ],
};

The related PlayerView events for subtitles are:

onSubtitleAdded
onSubtitleRemoved
onSubtitleChanged

We provide a complete example implementation in the example app.