Show current quality label in JWplayer controlbar

Question

I'm using JWplayer 7.2.3 and i have several video qualities, i use this code to display player:

jwplayer("myElement").setup({image: preview, sources: [{
    file: "http://video6.net/hd1/2829.mp4?st=IxbKO3FEtTPi8Pr0hvufFw&e=1453509476",
    label: "720p HD",
    "default": true
    },{
    file: "http://video6.net/sd1/2829.mp4?st=IxbKO3FEtTPi8Pr0hvufFw&e=1453509476",
    label: "360p SD",
    "default": false
    },{
    file: "http://video6.net/lq1/2829.mp4?st=IxbKO3FEtTPi8Pr0hvufFw&e=1453509476",
    label: "240p LQ",
    "default": false
    }],width: "100%",aspectratio: "16:9",skin: {url:"/jwplayer/skins/glow.css",name: "glow"},tracks: [{
            file: "http://video8.net/timelines/2/8/2829/thumbnails.vtt",
            kind: "thumbnails"
        }],startparam: "starttime"});

I want to display current video quality label on control bar - how can i do this?

Answer 1

With the new version 7 CSS skinning model, in theory, you can make the player look however you'd like.

For starters, you can use the following code to identify the current quality.

jwplayer('myElement').setup({
            ...         
            events: 
                onQualityChange: function(callback) {
                    updateQuality();
                },
function updateQuality() {
    var curQual = jwplayer('myElement').getCurrentQuality();
    //now you have a variable with the current quality at any given
      time and you can build this variable into your custom skin, which
      is beyond the scope of this question
}

Hope this helps!