
JwPlayer HD Button Quality Pretty Labels
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