Skip to main content
Version: 4.12.7

How to apply accurate buffering strategy

By default, THEOplayer buffers 20 seconds of video including audio/subtitles in order to guarantee smooth playout. THEOplayer (alike other Web players) is relying on HTML SourceBuffer API for buffering purposes. Unfortunately there is no method which informs you how big the buffer size of given browser/device is. Of course, it can be different for device, and even browser. In consequence in edge circumstances might happen that the following error is encountered: Player error: Failed to execute 'appendBuffer' on 'SourceBuffer': The SourceBuffer is full, and cannot free space to append additional buffers.

Proactive strategy

One of the approach to deal with above issue is to apply proactive strategy which adjust player.abr.targetBuffer depending on what quality is currently used. The below table presents what approximately bandwidth is required for video streaming:

ResolutionsRequired Bandwidth (H264)Required Bandwidth (H265)
1280x720 (HD)3Mbps1.5Mbps
1920x1080 (FHD)6Mbps3Mbps
3840x2160 (UHD)25Mbps12Mbps
4096x2160 (4K)32Mbps15Mbps

Taking above table into account, the logic responsible for the proactive strategy can look like:

player.addEventListener("representationchange", function (event) {
// specifies how big bandwidth is required for the current quality
var representationBandwidth = event.representation.bandwidth;
// player.abr.targetBuffer is 20 by default
var targetBuffer = player.abr.targetBuffer;

// SD
if (representationBandwidth < 3000000) {
targetBuffer = 20;
} else if (
representationBandwidth > 3000000 &&
representationBandwidth < 6000000
) {
// HD
targetBuffer = 10;
} else if (representationBandwidth > 6000000) {
//FHD, UHD, 4K
targetBuffer = 5;
}

player.abr.targetBuffer = targetBuffer;
console.log(
"representationchange - updated player.abr.targetBuffer: " +
player.abr.targetBuffer
);
});

Please note that the above numbers should be adjusted depending on the video content used.

Resources