Version: 2.67.0

Using MediaTrack API | How to start with a specific quality?

This question is typically asked because developers want their HLS or MPEG-DASH stream to start with a specific rendition of the manifest. They want to implement this use-case to speed-up the time-to-first frame, or to serve a better quality to the customer, or to serve a different quality on different platforms.

The snippet below demonstrates how you can start with a specific quality.


var player = new THEOplayer.Player(element, playerConfig);
player.videoTracks.addEventListener('addtrack', function(e0) {
e0.track.targetQuality = [e0.track.qualities[0]]; // start with a specific quality
player.addEventListener('progress', attachABRResetLogic);
function attachABRResetLogic() {
if (player.buffered.length > 0) {
// switch to normal ABR when THEO buffered beyond 10 seconds
if (player.buffered.end(player.buffered.length - 1) > 10) {
player.videoTracks[0].targetQuality = null;
player.removeEventListener('progress', attachABRResetLogic);
player.source = {
sources : [{
src : '//'

Use the targetQuality property to pass on an array of qualities. THEOplayer will only be able to render qualities belonging to this array through its ABR algorithm. Viewers can still select the quality through the quality selector.

When the addtrack event is dispatched, THEOplayer has not yet started buffered, so you can adjust the targetQuality. The targetQuality property allows you to specify a set of qualities on which THEOplayer can use for ABR-selection. THEOplayer will have to select the set quality if only one quality is provided. You reset the ABR-selection by setting targetQuality to null.