JwPlayer HD Button Quality Pretty Labels

me — Jun 21, 2017 04:11AM EDT

---

Dear JwPlayer Lovers,

Today I need to tell you that how to manage the labels of different video qualities in beautiful way. The default video quality labels are weird like this http://prntscr.com/fmbhcl

To make it beautiful like this http://prntscr.com/fmbhjd

You need to paste this code where you need to show you player after the player initialization

Code:

playerInstance.on('play',function(){
$('.jw-menu').each(function(){
$(this).find('li').each(function(index, value){
if(index === 0)
document.getElementsByClassName('jw-menu')[0].childNodes[index].innerHTML = 'Auto';
if(index === 1)
document.getElementsByClassName('jw-menu')[0].childNodes[index].innerHTML = '144p';
if(index === 2)
document.getElementsByClassName('jw-menu')[0].childNodes[index].innerHTML = '240p';
if(index === 3)
document.getElementsByClassName('jw-menu')[0].childNodes[index].innerHTML = '360p';
if(index === 4)
document.getElementsByClassName('jw-menu')[0].childNodes[index].innerHTML = '480p';
if(index === 5)
document.getElementsByClassName('jw-menu')[0].childNodes[index].innerHTML = '720p <sup style="color:red;">HD</sup>';
if(index === 6)
document.getElementsByClassName('jw-menu')[0].childNodes[index].innerHTML = '1080p <sup style="color:red;">HD</sup>';
});
});
});

Hope this will help someone.

Regards
Tahir Khan Afridi