[object Object] Icon

Encoding
Learn how to create, start, manage and modify Encodings

[object Object] Icon

Player
Learn how to create, start, manage and modify Players

[object Object] Icon

Analytics
Learn how to create, start, manage and modify Analyticss

Docs Home
User shortcuts for search
Focus by pressing f
Hide results by pressing Esc
Navigate via   keys

Tue Aug 28 2018

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:

1 var getQualityLabels= function(data) {
2 if (data.width >= 1920) {
3 return data.id + ' (Full HD)';
4 }
5 else if (data.width >= 1200) {
6 return data.id + ' (HD)';
7 }
8 else {
9 return data.id;
10 }
11 }
12
13 var getSubtitleLabels = function(data) {
14 var label = data.label.toUpperCase() + ' (SubtitleID: ' + data.id + ')';
15 if (data.label === 'en') {
16 return label += ' (original)';
17 }
18 return label;
19 }
20
21 var getTrackLabels = function(data) {
22 if (data.mimeType.indexOf('audio') >= 0) {
23 return data.lang.toUpperCase();
24 }
25 return data.lang;
26 }
27
28 var conf = {
29 key: "Your Player Key",
30 source: {
31 dash: "https://bitdash-a.akamaihd.net/content/sintel/sintel.mpd",
32 hls: "https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",
33 poster: "https://bitmovin.com/wp-content/uploads/2016/06/sintel-poster.jpg",
34 labeling: {
35 dash: {
36 qualities: getQualityLabels,
37 subtitles: getSubtitleLabels,
38 tracks: getTrackLabels
39 }
40 }
41 },
42 };
43
44 conf.source.labeling.hls = conf.source.labeling.dash;

Related Topics:

Give us feedback