Set multiple qualities of media

You can not set up different qualities when you're using HTML object to generate thisPlayer. You have to generate thisPlayer with JavaScript way to set up this functionality!

Set up different media qualities with thisPlayer is very simple. You have to use resources option with little bit different values than regular. Take a look at the example below and you'll easily get know how to do that:

var tp = thisPlayer({
    container: '#player-container',
    resources: [
        { // Resources for HD (high definition) quality item
            id: 'hd', // Unique id of quality item
            label: 'HD', // Label for player quality switcher
            resources: [ // Regular resources for each media quality item
                ['/your-folder/video-hd.flv', 'video/x-flv'],
                ['/your-folder/video-hd.mp4', 'video/mp4']
            ], default: true
        },
        { // Resourqes for LQ (low quality) quality item
            id: 'lq', // Unique id of quality item
            label: 'LQ', // Label for player quality switcher
            resources: [ // Regular resources for each media quality item
                ['/your-folder/video-lq.flv', 'video/x-flv'],
                ['/your-folder/video-lq.mp4', 'video/mp4']
            ]
        }
        // You can have more media sources for different media qualities
    ],
});

Get or change quality manually

thisPlayer provides an method to get current quality id or to change player quality mode by quality item id. For example get current quality mode of tp which is instance of thisPlayer according to the code above.

tp.quality();

It returns 'hd' because that was default quality id.

Now lets change current quality mode using same method - just provide different quality item id.

tp.quality('lq');

That code changes current quality mode. Disables last quality item with id 'hd' and enables new quality item with id 'lq', and returns thisPlayer object. As you can see this method is very easy to use. It helps to control player qualities manually.

When quality changes - Event

qualitychange event is firing when quality is changed manually or by user gesture to the player. in both cases you can use function callback with its arguments. Lets see an example of attaching that event to thisPlayer tp instance and accessing callback arguments:

tp.on('qualitychange', function(qualities, id){
    // [qualities] an argument which gives whole qualities object
    // [id] argument that provides current quality id
});

So that's it regarding multiple qualities of thisPlayer. As you can see it is not too hard to manipulate thisPlayer qualities. So ENJOY!