Creating a Change Quality Switcher

Create a container in the HTML page that's going to be populated with the availble variants. In this example we are going to use a simple select box but in a real world scenario it's probably going to be a more sophisticated widget.

<div> Quality:<select id="quality"><option value="0">Auto</option></select> </div>

Create a Viblast observer and attach to the appropriate callback

var observer = {
    onAvailableVariantsUpdate: function(variants, changeQualityCb) {
        //see below for the actual implementation
    }
};
var vbConfig = {
    ...., //the usual config
    internalsObserver: observer
};
var vbCtx = Viblast.play(vbConfig);

Populate available variants in the dropdown and instruct viblast to change the quality when the value of the dropdown changes

var observer = {
    onAvailableVariantsUpdate: function(variants, changeQualityCb) {
        var qualitySelect = document.getElementById('quality');
              for (i = 0; i < variants.length; i++) {
                      var opt = document.createElement('option');
                      opt.value = variants[i].bitrate;
                      opt.innerHTML = variants[i].horizontalResolution + 'x' + variants[i].verticalResolution;
                      qualitySelect.appendChild(opt);
              }

              qualitySelect.addEventListener('change', function(ev) {
                      var select = ev.target;
                      var selectedElem = select.options[select.selectedIndex];
                      changeQualityCb(selectedElem.value);
              }, false);
    }
};

Note that viblast won't discard any amount of video that has already been buffered. This means that the quality will chage after a certain amount of time has pased and it won't change immediately. The amount of time depends on the amount of buffered video and the length of the HLS segments in the HLS playlist.