Skip to main content
Version: 11.7.0

How to start with a specific quality on Web

This article describes how you can start playback with a specific quality. Developers typically want their HLS or MPEG-DASH stream to start with a specific rendition of the manifest to speed up the time-to-first-frame, to serve a better quality to the customer, or to serve a different quality on different platforms.

Usage​

When the addtrack event is dispatched, THEOplayer has not started buffering yet, so you can still adjust the targetQuality. This property allows you to specify a set of qualities that THEOplayer can use for ABR selection. THEOplayer has to select the given quality if only one quality is provided. You reset the ABR selection by setting targetQuality to null.

const player = new THEOplayer.Player(element, playerConfig);
player.videoTracks.addEventListener('addtrack', function () {
  player.videoTracks[0].targetQuality = player.videoTracks[0].qualities[0]; // start with a specific quality
  player.addEventListener('progress', attachABRResetLogic);
});

function attachABRResetLogic() {
  if (player.buffered.length > 0) {
    // switch to normal ABR when THEOplayer 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: '//cdn.theoplayer.com/video/star_wars_episode_vii-the_force_awakens_official_comic-con_2015_reel_(2015)/index.m3u8',
    },
  ],
};
note

This is not possible on iOS (and with DRM streams in macOS Safari), because playback control on the Apple HLS playback pipeline is very limited.