logo
SDKs
IntroductionHow to update a SDK?
Web
Getting started with the Web SDK (Extended)Getting started with the Web SDKAPI examplesHow to implement Keyboard HotkeysHow to embed an iframe?How to implement a seamless transition between videos?How can I use video inside THEOplayer?How to work around browser cache with a new license?How to customise quality selection & labels (MP4)How to get frame-accurate currentTime display in the UI Control bar
Android
Getting started with the Android SDKAndroid SDK customizationAndroid SDK product flavorsHow 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
iOS
Getting started with the iOS SDKiOS SDK 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 SDK Touch-events (gestures)Building for iOS Simulator, but the linked and embedded framework THEOplayerSDK.framework was built for iOS + iOS Simulator
Android TV
Getting started with the Android TV SDK
tvOS
Getting started with the tvOS SDK
Chromecast
Getting started with the Chromecast SDKChromecast Application Customization
Webos
Getting Started with THEOPlayer on WebOS
Tizen
Getting started with the Tizen SDKInstalling 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
Roku
Getting Started with Roku SDK
Frameworks

Android SDK customization

If you want to use custom CSS or JavaScript files you can add the cssPaths and jsPaths properties to your layout.

When a relative path is used, it will be relative to the assets folder.

XML Configuration

<com.theoplayer.android.api.THEOplayerView
    android:id="@+id/theo_player_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultCss="true"
    app:cssPaths="path/to/style1.css" 
    app:jsPaths="path/to/script1.js" />

Java Configuration:

THEOplayerConfig playerConfig = new THEOplayerConfig.Builder()
        .chromeless(false)
        .defaultCss(true)
        .cssPaths("path/to/style1.css","path/to/style2.css")
        .jsPaths("path/to/script1.js","path/to/script2.js")
        .build();
THEOplayerView tpv = new THEOplayerView(this, playerConfig);

Custom CSS and the Chromeless flag

You can send messages from within a custom JavaScript file to the Android SDK.

1. Register a message listener in your Android app:

THEOplayerConfig playerConfig = new THEOplayerConfig.Builder()
        .jsPaths("path/to/script.js")
        .build();
THEOplayerView tpv = new THEOplayerView(this, playerConfig);
tpv.addJavaScriptMessageListener("messagetype", new MessageListener() { 
    @Override public void handleMessage(String message) { 
        System.out.println("Received message from JavaScript: " + message); 
    } 
});

2. Send a message in your custom JavaScript file (script.js):

To send a message the theoplayerAndroid.sendMessage object should be used. The theoplayerAndroid object is provided in the global scope by the THEOplayer Android SDK.

/* this example sends a message every 10 seconds */
setInterval(function() {
    theoplayerAndroid.sendMessage('messagetype', 'message');
}, 10000)

Custom FullScreen Activity

If you want to customize the behavior and/or look of the full screen activity, you can do this by using a custom full screen activity class. The steps to do this are given below.

Extend the FullScreenActivity class

To do this, you first need to make a class that extends FullScreenActivity, for example:

public class CustomFullScreenActivity extends FullScreenActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        View overLay = this.getLayoutInflater().inflate(R.layout.fullscreen_overlay, null);
        this.addContentView(overLay, new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
    }

    public void onPauseButtonClick(View view) {
        getTHEOplayerView().getPlayer().pause();
    }
}

Of which they layout xml could be like this:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context=".mainactivity.CustomFullScreenActivity">
    <Button
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:onClick="onPauseButtonClick"
     android:text="pause" />
</FrameLayout>

Set your custom FullScreenActivity class for a THEOplayerView

This class could then be set for a certain THEOplayerView object (tpv) like this:

tpv.getFullScreenManager().setFullscreenActivity(CustomFullScreenActivity.class);
github
Make sure to follow us on GitHub!
THEO-logo-white
twitter
facebook
linkedin
Copyright © 2020. All Rights Reserved.
Leuven
New York
Singapore
Barcelona