IntroductionHow to update an SDK?THEOplayer 5.0 - Native Mobile iOS/tvOS and Android SDKs
Getting started on Web (Extended)Getting started with the new Web UIGetting started on WebAPI examplesHow to implement Keyboard HotkeysHow to embed an iframeHow to implement a seamless transition between videos?How to work around browser cache with new THEOplayer SDK libraries?How to customise quality selection & labels (MP4)How to get frame-accurate currentTime display in the UI Control barHow to play an LCEVC source with THEOplayerHow to use WebXR with THEOplayerHow to use THEOplayer as a JavaScript module
Android legacy (4.12.x)
Getting started on Legacy Android SDK (4.12.x)Legacy Android SDK (4.12.x) customizationHow to couple the native MediaRouteButton to THEOplayerHow to enable experimental native rendering on AndroidHow to do offline Playback with AES-128 Encrypted Streams on Android
Getting started with the Android UIGetting started on AndroidAndroid Feature IntegrationsMigration from THEOplayer Android/AndroidTV/FireTV SDK 4.x to THEOplayer Android SDK 5.0
iOS legacy (4.12.x)
Getting started on iOSiOS/tvOS SDK and Legacy iOS/tvOS SDK (4.12.x) CustomizationMy app does not want to build for the app storeHow to bypass copy() not working in Safari consoleHow to couple the native GCKUICastButton to THEOplayeriOS/tvOS SDK and Legacy iOS/tvOS SDK (4.12.x) Touch-events (gestures)Building for iOS Simulator, but the linked and embedded framework THEOplayerSDK.framework was built for iOS + iOS SimulatorHow to implement custom local network access (LNA) interstitial dialog for Chromecast
Getting started guide for THEOplayer iOS/tvOS SDK 5.0THEOplayer iOS/tvOS 5.0 Feature IntegrationsMigration from THEOplayer iOS and tvOS SDK 4.x to THEOplayer iOS/tvOS SDK 5.0+
Android TV Legacy (4.12.x)
Getting started on Android TV Legacy (4.12.x)
Getting started on tvOS
Getting started on ChromecastChromecast Application Customization
Getting Started on webOS
Getting started on TizenInstalling the Tizen developer toolsSetting up a Tizen device for debuggingDeploying a test app on a physical Tizen deviceDeploying a test app on a Tizen emulator
Getting Started on Roku
Fire TV Legacy (4.12.x)
Getting started on Fire TV Legacy (4.12.x)

How to customise quality selection & labels (MP4)

Some of our customers prefer MP4 assets over HLS/MPEG-DASH ones. One major downside to this approach is that Adaptive Bitrate Streaming (ABR) is not possible with such streams, as they don't have a playlist with multiple qualities.

To counter this, we've made it possible to pass on a list of MP4 qualities & switch between them manually, to improve the overall UX. What is nice about this piece of integration code, is that it can be tweaked and applied to customise other parts of the default UI as well!


Web SDK Android SDK iOS SDK tvOS SDK Android TV SDK Chromecast SDK
Yes Yes Yes N/A Yes N/A

Customizing the quality selector & labels

This example explains how to customise quality selection & labels for MP4 assets.


First of all, we need to set up the player (don't forget to edit the placeholders to match your setup).

Then, the different MP4 qualities of the same asset need to be stated, along with the corresponding resolutions:

// set your resolutions and sources
var resolutions = [{name: '360p', src: 'http://example.com/demos/sample-videos/low.mp4'}, {name: '540p', src: 'http://example.com/demos/sample-videos/medium.mp4'}, {name: '720p', src: 'http://example.com/demos/sample-videos/high.mp4'}];

Now for the slightly trickier part: Removing current & adding custom menu

var currentTime, wasPaused;
var settingsMenu = player.ui.getChild('ControlBar').getChild('SettingsButton').menu;
// Remove built-in quality sub menu
// Create custom quality sub menu
var qualityMenuItem = settingsMenu.addSubMenuItem({
    index : 0
var qualityMenuTitle = document.createElement('span');
qualityMenuTitle.className = 'theo-settings-control-menu-item-title';
qualityMenuTitle.innerHTML = 'Quality';
var qualityMenuValue = document.createElement('span');
qualityMenuValue.className = 'theo-settings-control-menu-item-value';
qualityMenuItem.subMenu.menuHeader.el().innerHTML = 'Quality';
var qualityItems = resolutions.map(function (resolution) {
    var qualityItem = qualityMenuItem.subMenu.addMenuItem();
    qualityItem.el().innerHTML = resolution.name;
    qualityItem.on('click', function () {
    return qualityItem;
// Getting the player/UI in the correct state
function selectQuality(resolution) {
    qualityMenuValue.innerHTML = resolution.name;
    currentTime = player.currentTime;
    wasPaused = player.paused;
    player.src = resolution.src;
    player.currentTime = currentTime;
    if (!wasPaused) {
    var qualityItem = qualityItems[resolutions.indexOf(resolution.name)];
    qualityItems.forEach(function (item) {
        item.selected(item === qualityItem);
Android SDK

The above JavaScript code can be used for Android projects by injecting the JavaScript code. Documentation for: ´Injecting CSS and JavaScript to Android/iOS

Legacy iOS/tvOS SDK (4.12.x)

The above JavaScript code can be used for Android projects by injecting the JavaScript code. Documentation for: ´Injecting CSS and JavaScript to Android/iOS

You can now select multiple qualities of the same MP4 asset!

Customize quality selection

Make sure to follow us on GitHub!
Copyright © 2022. All Rights Reserved.
New York