How can I change the labels for video/audio qualities or subtitles in the settings menu?

During its initialization, the player automatically sets the according fields and labels in the UI (video qualities IDs, language labels etc...). By default, these labels depend on the information that has been parsed from the HLS Master Playlist or DASH manifest.

In some cases, labels that are embedded within the manifest might not be relevant or clear enough for the target users. For this reason, it is possible to customize each label in the settings panel of the player UI.

To achieve this, you can use the labeling option in the source configuration object. The labeling configuration object provides three callbacks which allow you to customize the labels during initialization of the player: qualities, subtitles, tracks.

Example:

  var getQualityLabels= function(data) {
    if (data.width >= 1920) {
      return data.id + ' (Full HD)';
    }
    else if (data.width >= 1200) {
      return data.id + ' (HD)';
    }
    else {
      return data.id;
    }
  }

  var getSubtitleLabels = function(data) {
    var label = data.label.toUpperCase() + ' (SubtitleID: ' + data.id + ')';
    if (data.label === 'en') {
      return label += ' (original)';
    }
    return label;
  }

  var getTrackLabels = function(data) {
    if (data.mimeType.indexOf('audio') >= 0) {
      return data.lang.toUpperCase();
    }
    return data.lang;
  }

  var conf = {
    key: "Your Player Key",
    source: {
      dash: "https://bitdash-a.akamaihd.net/content/sintel/sintel.mpd",
      hls: "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",
      poster: "https://bitmovin.com/wp-content/uploads/2016/06/sintel-poster.jpg",
      labeling: {
        dash: {
          qualities: getQualityLabels,
          subtitles: getSubtitleLabels,
          tracks:    getTrackLabels
        }
      }
    },
  };

  conf.source.labeling.hls = conf.source.labeling.dash;

Related Topics:

[Android SDK] Using custom labels for audio or subtitle tracks