Ads

Analytics

Cast

DRM

Integrations

Mediatrack

Miscellaneous

Network

Player

Texttrack

Introduction Is it possible to remove an element from the UI?How to align the timeline in the middle How to change the Big Play Button?How to make the control bar always visible?Is it possible to hide/disable the Google IMA UI?How to build a Chromeless UI How to insert a button How to change the default UI language to other Customize UI during ad playback How to change how a video should be fit inside a container How to make an audio-only player Customizing the UI: vertical volume slider UI Skinning How to detect the visibility of the default control bar How to disable click to pause

License

Objective C

How to change the default UI language to other

This article describes how to change the default UI language to other.

The UIConfiguration Object uses a property language *& languages *to change the default UI language i.e. English to any other language. This is an optional property of the player whereby if defined then the language code must have a matching language dictionary in the languages configuration.

When this configuration is set, the labels and tooltips in the UI will be replaced by their translated version from the language. If no translation is found for a label or tooltip, the original English version will be used instead.

SDKs
Prerequisites
Code examples
Reference Material

SDKs

Web SDK	Android SDK	iOS SDK	tvOS SDK	Android TV SDK	Chromecast SDK
Yes	Yes	Yes

Prerequisites

THEOplayer valid licence SDK for respective platform (Web, iOS & Android)
Download the specific language JSONS to add into your project

Language JSON Links

Arabic : http://cdn.theoplayer.com/demos/theoplayer/lang/ar.js

Bashkir: http://cdn.theoplayer.com/demos/theoplayer/lang/ba.js

Bulgarian: http://cdn.theoplayer.com/demos/theoplayer/lang/bg.js

Catalan: http://cdn.theoplayer.com/demos/theoplayer/lang/ca.js

Czech: http://cdn.theoplayer.com/demos/theoplayer/lang/cs.js

Danish: http://cdn.theoplayer.com/demos/theoplayer/lang/da.js

German: http://cdn.theoplayer.com/demos/theoplayer/lang/de.js

Greek: http://cdn.theoplayer.com/demos/theoplayer/lang/el.js

Spanish: http://cdn.theoplayer.com/demos/theoplayer/lang/es.js

Persian: http://cdn.theoplayer.com/demos/theoplayer/lang/fa.js

Finnish: http://cdn.theoplayer.com/demos/theoplayer/lang/fi.js

French: http://cdn.theoplayer.com/demos/theoplayer/lang/fr.js

Croatian: http://cdn.theoplayer.com/demos/theoplayer/lang/hr.js

Hungarian: http://cdn.theoplayer.com/demos/theoplayer/lang/hu.js

Italian: http://cdn.theoplayer.com/demos/theoplayer/lang/it.js

Japanese: http://cdn.theoplayer.com/demos/theoplayer/lang/ja.js

Korean: http://cdn.theoplayer.com/demos/theoplayer/lang/ko.js

Dutch: http://cdn.theoplayer.com/demos/theoplayer/lang/nl.js

Polish: http://cdn.theoplayer.com/demos/theoplayer/lang/pl.js

Portuguese: http://cdn.theoplayer.com/demos/theoplayer/lang/pt-BR.js

Russian: http://cdn.theoplayer.com/demos/theoplayer/lang/ru.js

Serbian: http://cdn.theoplayer.com/demos/theoplayer/lang/sr.js

Swedish: http://cdn.theoplayer.com/demos/theoplayer/lang/sv.js

Turkish: http://cdn.theoplayer.com/demos/theoplayer/lang/tr.js

Ukrainian: http://cdn.theoplayer.com/demos/theoplayer/lang/uk.js

Vietnamese: http://cdn.theoplayer.com/demos/theoplayer/lang/vi.js

Chinese: http://cdn.theoplayer.com/demos/theoplayer/lang/zh-CN.js | http://cdn.theoplayer.com/demos/theoplayer/lang/zh-TW.js

Code examples

Web SDK

Each language should be described as a UIConfiguration

player = new THEOplayer.Player(playerElement, {
    libraryLocation: 'path/to/theoplayer/',
    license: "your-license-here",
    ui: {

        language: 'esp',
        languages: {
            'esp':
            {
                "Play": "Reproducir",
                "Pause": "Pausa",
                "Current Time": "Tiempo actual",
                "Duration Time": "Duración",
                "Remaining Time": "Tiempo restante"
            }
        }
    }
});

Legacy Android SDK (4.12.x)

In the implementation for Android SDK, the addition of language needs to be done in 2 following Steps:

An Additional separate JavaScript file needs to be added to your Android project. You can follow the instructions presented in this article: How to add/customize the Android THEOplayer SDK
After a JavaScript file is added to your project, Please add the specific language to the JS file

Sample Code to Add new language

//add this code to pre.js file
THEOplayer.videojs.addLanguage("nl",{
    "Play": "Afspelen",
    "Pause": "Pauze",
    "Current Time": "Huidige tijd",
    "Duration Time": "Looptijd",
    "Remaining Time": "Resterende tijd",
    "Stream Type": "Streamtype",
    "LIVE": "LIVE",
    "Loaded": "Geladen",
    "Progress": "Status",
    "Fullscreen": "Volledig scherm",
    "Non-Fullscreen": "Geen volledig scherm",
    "Mute": "Geluid uit",
    "Unmute": "Geluid aan",
    "Settings": "Instellingen",
    "Quality": "Kwaliteit",
    "Speed": "Snelheid",
    "Normal": "Normaal",
    "AUTOMATIC": "AUTOMATISCH",
    "Automatic": "Automatisch",
    "Playback Rate": "Weergavesnelheid"
});

Create a new player configuration with declared new UIConfiguration:

Sample Code to create a new player config

//declare the variable for THEOplayerView
THEOplayerView theoPlayerView;

//Create a new player config in onCreate(Bundle savedInstanceState): 
THEOplayerConfig playerConfig = new THEOplayerConfig.Builder()
                .jsPathsPre("pre.js")
                .ui(new UIConfiguration.Builder().language("nl").build())
                .build();
theoPlayerView = new THEOplayerView(this, playerConfig);

Legacy iOS/tvOS SDK (4.12.x)

In the implementation for iOS SDK, the addition of language needs to be done in 2 following Steps:

An Additional separate JavaScript file needs to be added to your Android project. You can follow the instructions presented in this article: How to add/customize the iOS THEOplayer SDK
After a JavaScript file is added to your project, Please add the specific language to the JS file

Sample code to add new language

//add this code to pre.js file
THEOplayer.videojs.addLanguage("nl",{
    "Play": "Afspelen",
    "Pause": "Pauze",
    "Current Time": "Huidige tijd",
    "Duration Time": "Looptijd",
    "Remaining Time": "Resterende tijd",
    "Stream Type": "Streamtype",
    "LIVE": "LIVE",
    "Loaded": "Geladen",
    "Progress": "Status",
    "Fullscreen": "Volledig scherm",
    "Non-Fullscreen": "Geen volledig scherm",
    "Mute": "Geluid uit",
    "Unmute": "Geluid aan",
    "Settings": "Instellingen",
    "Quality": "Kwaliteit",
    "Speed": "Snelheid",
    "Normal": "Normaal",
    "AUTOMATIC": "AUTOMATISCH",
    "Automatic": "Automatisch",
    "Playback Rate": "Weergavesnelheid"
});

Create a new player configuration with declared new UIConfiguration:

Sample Code to create a new player config

//declare the variable for THEOplayerView
var theoplayer: THEOplayer!

//Create a new player config in ViewDidLoad()
let jsPath = Bundle.main.path(forResource:"pre", ofType: "js")!
let playerConfig = THEOplayerConfiguration(defaultCSS: true, jsPathsPre: [jsPath], ui: UIConfiguration(language: "nl"))
self.theoplayer = THEOplayer(configuration: playerConfig)

Reference Material

A Sample project to demonstrate the above use-case:

Include THEOplayer Android SDK before compiling the entire project.

Download Here: http://cdn.theoplayer.com/demos/theoplayer/apps/lang/android-sdk-starter-project-master.zip
Include THEOplayer iOS SDK before compiling the entire project.

Download Here: http://cdn.theoplayer.com/demos/theoplayer/apps/lang/ios-sdk-starter-project-master.zip

Make sure to follow us on GitHub!

Leuven

New York

Singapore

Barcelona