Bitmovin player on Safari does not load captions selection options from media SourceConfig

Question

I'm using the Bitmovin player (v8.15) in an Angular App. I've configured the player as follows and defined the callback

this._player = new Player(this.videoPlayer.nativeElement, {
  ...bitmovinConfig,
  events: {
    // other code removed

    [SubtitleAdded]: () => this.triggerCaptionChange(),

    // other code removed
  },
});

triggerCaptionChange() {
  const captions = this._player.subtitles.list() as MediaCaption[];
  console.log(captions);
  // other code removed
}

MediaCaption in Chrome looks like this (we basically extend bitmovin's SubtitleTrack interface and added subType and sideloaded:

"id": "1",
"url": "https://...myurl_hidden.../DASH/5b95ba67-75bc-4127-bcaa-182a819f649c_WebVTT_eng.vtt",
"kind": "caption",
"lang": "en-US",
"subType": "subtitles",
"sideloaded": true,
"label": "English",
"enabled": true

We are also loading the player with a config as follows:

async onSourceChange(_: SourceConfig, current: SourceConfig) {  
  await this._player.load(current); 
  this.triggerAudioChange();
  this.triggerCaptionChange(); 

  ...
}

In Chrome current looks like this:

"hls": "https://...urlhidden.../spmx/.../.../Dash/DASH_pertitle-dash.mpd",
"dash": "https://...urlhidden.../spmx/.../...Dash/DASH_pertitle-dash.mpd",
"drm": hidden,

"subtitleTracks": [
    {
      "enabled": "false",
      "id": "1",
      "url": "https://...urlhidden.../spmx/.../.../Dash/Subtitles_es_419.vtt",
      "kind": "caption",
      "label": "es-419",
      "lang": "es-419",
      "subType": "Subtitles",
      "sideloaded": true
    },
    {
      "enabled": "false",
      "id": "3",
      "url": "https://...urlhidden.../spmx/.../.../Dash/Captions_en_US.vtt",
      "kind": "caption",
      "label": "es-US",
      "lang": "en-US",
      "subType": "Captions",
      "sideloaded": true
    }
  ],
  "options": {
    "startTime": 1709
  }

In Safari current looks like this (note, no dash key):

"hls": "https://...urlhidden.../spmx/.../.../Apple/HLS_main.m3u8",
"drm": hidden,
"subtitleTracks": [
    {
      "enabled": "false",
      "id": "1",
      "url": "https://...urlhidden.../spmx/.../.../Apple/Subtitles_es-419.m3u8",
      "kind": "caption",
      "lang": "es-419",
      "lang": "es-419",
      "subType": "SUBTITLES",
      "sideloaded": true
    },
    {
      "enabled": "false",
      "id": "2",
      "url": "https://...urlhidden.../spmx/.../.../Apple/Subtitles_es_419.vtt",
      "kind": "caption",
      "lang": "es-419",
      "lang": "es-419",
      "subType": "Subtitles",
      "sideloaded": true
    },
    {
      "enabled": "false",
      "id": "4",
      "url": "https://...urlhidden.../spmx/.../.../Apple/Captions_en-US.m3u8",
      "kind": "caption",
      "lang": "en-US",
      "lang": "en-US",
      "subType": "SUBTITLES",
      "sideloaded": true
    }
    {
      "enabled": "false",
      "id": "5",
      "url": "https://...urlhidden.../spmx/.../.../Apple/Captions_en_US.vtt",
      "kind": "caption",
      "lang": "en-US",
      "lang": "en-US",
      "subType": "Captions",
      "sideloaded": true
    }
  ],
  "options": {
    "startTime": 1709
  }

In Chrome: the console log gives me an array with two items.

In Safari: I get an empty array.

Answer 1

I was able to contact Bitmovin and after some discussions with them I had to load the SubtitleNative module (bitmovinplayer-subtitles-native). Make sure you load it after the Subtitles module (bitmovinplayer-subtitles)

import BitmovinSubtitlesNativeModule from 'bitmovin-player/modules/bitmovinplayer-subtitles-native';
Player.addModule(BitmovinSubtitlesNativeModule);

When I did this, my sideloaded entries were loaded by bitmovin'. However, on Safari my custom 'subType' and 'sidedloaded' fields that I added to the subtitleTracks[] are stripped. (We use those to help us distinguish which tracks were sideloaded and which were loaded by the player from the manifest.

We decided to encode our subType and sidedloaded values into the label field of subtitleTracks. Now we're able to display these sideloaded caption options in our custom player UI.

Now the Bitmovin player calls my onCueEnter/Exit callbacks for me to render the caption text!