Store external text tracks alongside main content

[danmo]

Hi, Is it possible to store/download subtitle files using the Offline Storage api?

Right now I'm persisting the videos but not the .vtt files.

[joeyparrish]

Yes, absolutely. The Storage API will allow you to choose which tracks (including text tracks) to store offline. There is a configurable callback (offline.trackSelectionCallback) which is called with a list of tracks and returns a subset of the ones to store. If you don't configure it, the default callback will choose the highest SD resolution, the audio language which matches the user preferences, and all text tracks (because they are cheap).

[danmo]

In my case, I'm using external text tracks and adding them through the addTextTrack method. Any possibility on persisting external tracks?

[joeyparrish]

Ah, I see! No, we don't have that today, but I will add it to our backlog as an enhancement.

[danmo]

cool, for anyone who might be bumping into this here's my solution:

• downloaded the subtitles programmatically right before the offline .store call
• saved the local file path into the storage metadata
• because the player requires http transport (not file) for subtitle ingestion I'm serving the subtitle through a local server http://localhost:[port]/captions
• delete the local file on storage removal

[loicraux]

cool, for anyone who might be bumping into this here's my solution:

• downloaded the subtitles programmatically right before the offline .store call
• saved the local file path into the storage metadata
• because the player requires http transport (not file) for subtitle ingestion I'm serving the subtitle through a local server http://localhost:[port]/captions
• delete the local file on storage removal

Again, for anyone bumping into this, another solution that does not require a local http server to serve the text track files with http protocol :

1. Do download the subtitles files contents programmatically right before the call to offlineStorage.store
2. Add to the appMetadata of the stored content an array of TextTrack data (the text contents of the text track) & metadata (the data needed to make calls to addTextTrackAsync later on at playback time)
3. At playback time, since the player requires an http URL to load the subtitles, you can create such an url like this :

const { textTracks } = appMetadata;
const addedTextTracks = await Promise.all(
    textTracks.map(({ data, language, kind, mime, label }: TextTrackDefinition) => {
        const blob = new Blob([data], { type: mime });
        const url = URL.createObjectURL(blob);
        return player.addTextTrackAsync(url, language, kind, mime, undefined, label);
    })
);
// eslint-disable-next-line no-console
console.log(`Added ${addedTextTracks.length} text tracks`);
if (addedTextTracks.length > 0) {
    player.selectTextTrack(addedTextTracks[0]);
    player.setTextTrackVisibility(true);
}