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.
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!