logo
SDKs
IntroductionHow to update a SDK?
Web
Getting started on Web (Extended)Getting started on WebAPI 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 on AndroidAndroid 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 on iOSiOS 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 SimulatorHow to implement custom local network access (LNA) interstitial dialog for Chromecast
Android TV
Getting started on Android TV
tvOS
Getting started on tvOS
Chromecast
Getting started on ChromecastChromecast Application Customization
Webos
Getting Started on webOS
Tizen
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
Roku
Getting Started on Roku
Fire tv
Getting started on Fire TV
Frameworks

iOS SDK Customization

Custom CSS and JavaScript files

If you want to use custom CSS or JavaScript files you can instantiate the player with a THEOplayerConfiguration object.

let stylePath = Bundle.main.path(forResource:"style", ofType: "css")! 
let scriptPath = Bundle.main.path(forResource:"script", ofType: "js")!
let playerConfig = THEOplayerConfiguration(defaultCSS: false, cssPaths:[stylePath], jsPaths: [scriptPath])
/* or let playerConfig = THEOplayerConfiguration(chromeless: true, cssPaths:[stylePath], jsPaths: [scriptPath]) */  
var theoplayer = THEOplayer(configuration: playerConfig)

Note that the snippet above implies that you've created style.css and script.js in your iOS project. Ensure that these files are created and referenced correctly. The screenshot below demonstrates that these files are "discoverable" in our sample project because they appear in the left sidebar.

ios sdk customization sidebar

Custom CSS and the Chromeless flag

With the chromeless flag you can choose to use the chromeless version of the player which does not contain the THEOplayer UI. This allows you to write your own custom UI.

The THEOplayer CSS is not loaded when chromeless is enabled.

When chromeless is false, the THEOplayer UI is used. In that case the default style can still be disabled by setting the defaultCss flag to false.

Communication between a custom JavaScript file and the THEOplayer iOS SDK (≥ 1.0.10)

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

  1. Register a message listener in your native (e.g. Swift) code through addJavascriptMessageListener, as demonstrated in the example below:
func onMessageReceived(message : [String:Any]) {
    print(message)
    let a : String = message["a"] as! String
    let b : Int = message["b"] as! Int // booleans get converted to integers
    let c : Int = message["c"] as! Int
    let d : [String:Any] = message["d"] as! [String:Any]
    print(a, b, c, d)
}
theoplayer.addJavascriptMessageListener(name: "myMessageName", listener: onMessageReceived)
  1. Send a message in your custom JavaScript file (script.js):

To send a message the _webkit.messageHandlers.<messageName>.postMessage(<message body>)_ method must be used, as demonstrated in the example below:

/* this example sends a message every 10 seconds */  
setInterval(function() {  
    const message = {
        "a": "abc",
        "b": true,
        "c": 123,
        "d": {
            "a": "abc",
            "b": true,
            "c": 123
        }
    };
    window.webkit.messageHandlers.myMessageName.postMessage(message);
}, 10000)

The message body can be a JavaScript object or string:

  • If it's an object then the resulting type in Swift will be a dictionary [String:Any].
  • If it's a string then the result in Swift is a dictionary with one value and "data" as key.

Communication between the THEOplayer iOS SDK (≥ 1.0.10) and a custom JavaScript file

You can send messages from your native (e.g. Swift) code to your custom JavaScript file.

  1. Create a function in your custom JavaScript file, as demonstrated in the example below:

    function foobar(value) {
        console.log(value);
        if (value != "test") {
            throw new Error("An error occured.");
        }
        return value;
    }
  2. Call your JavaScript function in your native code through theoplayer.evaluateJavaScript, as demonstrated in the example below:

    theoplayer.addEventListener(type: PlayerEventTypes.PAUSE) { event in
        print(event)
        self.theoplayer.evaluateJavaScript("foobar('test')") { result, error in
            if error == nil {
                let result_ = result as! String
                print("result", result_)
            } else {
                print("error", error!)
            } 
        }
    }

Publishing to App Store

Please not that this is only necessary for versions below 2.16. Do not use this step if you have a newer version.

THEOplayer.framework is released as a FAT framework containing several architectures. The framework includes the i386, x8664, armv7 and arm64 architectures. Sometimes the App Store will not accept these (especially legacy simulator i386 and x8664 architectures.) 

In order to thin down the framework prior to archiving it and submitting it for upload, use the following command in Terminal:

lipo [path to THEOplayer.framework] -remove [i386, x86_64] -output [path to output the thinned framework]
github
Make sure to follow us on GitHub!
THEO-logo-white
twitter
facebook
linkedin
Copyright © 2022. All Rights Reserved.
Leuven
New York
Singapore
Barcelona