How to reduce data usage on mobile devices on Web
Customers who leverage THEOplayer's preloading capabilities (preload = "auto"), or who provide very high qualities,
sometimes receive complaints about data usage on mobile devices.
You can combat this by leveraging the ABR API and the MediaTrack API, as described in the steps below.
1. Lower the target buffer
The target buffer is the amount of seconds which the player buffers ahead of the current playback position. The standard buffer time is 20 seconds. Setting a lower number (e.g. 6 seconds) allows you to download less information in front of the playhead position. This value is also used when preloading content.
To set the target buffer length in seconds, use the targetBuffer
property of the ABR API:
player.abr.targetBuffer = 6;
If necessary to have a different target buffer length for mobile, add a check like this:
if (THEOplayer.videojs.browser.IS_ANDROID || THEOplayer.videojs.browser.IS_IOS) {
player.abr.targetBuffer = 8;
}
This snippet leverages THEOplayer's Video.js component.
2. Manage preloading
Preloading is a powerful feature when trying to reduce the join time. It is more effective in some situations than others, and managing it correctly helps you reduce the data usage:
- preloading a live stream may entail appending information in the buffer that will never be played, if the user waits long enough before clicking "Play";
- in those situations when a user is not yet likely to be playing a stream (e.g. the player is not yet in view), preloading may also mean downloading information that the user will not consume.
So, based on your use case, you might decide whether to enable preloading.
player.preload = 'auto'; // "metadata" is also a valid value
3. Choose the renditions considered for ABR
On mobile devices, THEOplayer by default takes into account the player size for ABR: this lets it avoid selecting renditions too big to be appreciated on the current device, thus avoiding wasting data.
Leveraging the target quality of the MediaTrack API, you can refine the rendition choice further and indicate yourself to the player which qualities should be considered for ABR. For example, you could configure that THEOplayer should only do ABR on the lowest 3 qualities of a stream containing 5.
You can also configure the
restrictToPlayerSize
property of the source's ABR configuration to replicate the mobile behaviour on laptop and desktop browsers.
See how to programmatically select a video track quality
to learn how to set the targetQuality of a video track.
Conclusion
There are several actions that can be taken to drastically reduce data usage on mobile devices, both in the player and at other levels. As far as the player is concerned, by leveraging its API as described you can filter different use cases and handle several aspects related to media download for each use case. This enables you to manage the precise behaviour in each case and optimize data usage.