Wrong quality for HLS stream

[akkie]

Hi,

I have the following HLS playlist:

#EXTM3U
#EXT-X-VERSION:3

#EXT-X-STREAM-INF:BANDWIDTH=1451360,AVERAGE-BANDWIDTH=663482,CODECS="avc1.640015,mp4a.40.2",RESOLUTION=640x268
360p/video.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=2383840,AVERAGE-BANDWIDTH=1033507,CODECS="avc1.64001e,mp4a.40.2",RESOLUTION=854x358
480p/video.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=4854536,AVERAGE-BANDWIDTH=1743843,CODECS="avc1.64001f,mp4a.40.2",RESOLUTION=1280x536
720p/video.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=768920,AVERAGE-BANDWIDTH=408799,CODECS="avc1.64000d,mp4a.40.2",RESOLUTION=426x178
240p/video.m3u8
#EXT-X-STREAM-INF:BANDWIDTH=7664008,AVERAGE-BANDWIDTH=2929299,CODECS="avc1.640028,mp4a.40.2",RESOLUTION=1920x804
1080p/video.m3u8

The problem is that the quality menu shows the height of the resolution.

[luwes]

Yes, that's how most players show the quality options. 360p, 480p, 720p, 1080p are all the height.
It might look strange because you don't have a typical aspect ratio of 16 / 9.

That being said, Media Chrome has an API to format the menu item text.
Import the MediaRenditionMenu class in JS and override this method:

MediaRenditionMenu.formatMenuItemText = (text, rendition) => {

  return rendition.width; // or `${rendition.width}x${rendition.height}`;
};