HTTP streaming qualities revisited

Due to many inquiries from our users about HTTP streaming qualities we have decided to share our thoughts and experience in this matter.

The HLS or DASH master playlist describes all of the available variants for your media content. Each variant is a version of the same stream at a particular bit rate and is contained in a separate playlist. The player is tuned to use the most appropriate variant based on the measured network bit rate to minimize stalling of playback, to give the user the best possible streaming experience.

Default video.js VHS engine includes an option enableLowInitialPlaylist, to select the lowest bitrate playlist initially when enabled. This helps to decrease playback start time. As soon as network bit rate is measured, the player switches to the appropriate variant accordingly.

Code snippet
var player = videojs ( "myplayer", { html5:{ vhs:{ enableLowInitialPlaylist: true }}};

Another option enabled by default is limitRenditionByPlayerDimensions. The adaptive algorithm limit quality level based on the HTML video element dimensions (width and height). If option disabled, the quality level is based on network bit rate only.

Code snippet
var player = videojs ( "myplayer", { html5:{ vhs:{ limitRenditionByPlayerDimensions: false }}};

Full documentations with description of possible VHS options and usage you can find here.

Alternative hls.js engine provided through the hlsjs plugin includes similar configuration options as VHS.

By setting configuration option startLevel you can order to select an initial playlist for auto mode. As soon as network bit rate is measured, the player switches to the appropriate variant accordingly.

Code snippet
var player = videojs ( "myplayer", { html5:{ hlsjsConfig:{ startLevel:0 }}};

An option capLevelToPlayerSize is disabled by default (false). If set to true, the adaptive algorithm will limit the levels usad in auto quality mode by the HTML video element dimensions (width and height).

Code snippet
var player = videojs ( "myplayer", { html5:{ hlsjsConfig:{ capLevelToPlayerSize:true }}};

All Hls.js fine tuning configuration options are described here.

Finally an option in regard to initial quality level developed by Nuevodevel.com from version 9.0.5 per several users' request. The option allows to bypass auto quality and start the stream from the chosen static quality. VHS or hlsjs config option startQuality value can be either resolution number (stream height) or bit rate value

VHS setup

Code snippet (resolution)
var player = videojs ( "myplayer", { html5:{ vhs:{ startQuality: 286 }}};

Hlsjs setup

Code snippet (resolution)
var player = videojs ( "myplayer", { html5:{ hlsjsConfig:{ startQuality: 286 }}};

See below example of HLS Vod stream. Chosen inital quality level is 286p, not just Auto usually 572p

UPDATE

We have found that in some advanced player setup, default VHS quality levels are not updated when media source changed. For this reason in Nuevo plugin version 9.0.6 we decided not to rely on VHS quality levels anymore and updated the code to read quality levels and manage it directly through HLS representations API. Quality levels provided through hlsjs plugin now are also managed directly through hls.js API.

Nuevodevel Blog
Nuevodevel Tweeter