Version: 2.67.0

FAQ | How to add CSS or JavaScript files to an Android/iOS project

This guide describes how to add CSS or JavaScript files to an Android or iOS project, and manipulate the player using CSS and/or JavaScript.

Including these files allows you to create a hybrid application to increase code re-usability:

  • You can build a UI for Web, and re-use it in your Android or iOS application.
  • You can add JavaScript logic, and re-use it in your Android or iOS application.

Through JavaScript, you have access to some THEOplayer features which aren't exposed in the iOS or Android SDK, such as the Network API.

How to communicate with messages between your Android/iOS application, and your JavaScript logic, will be discussed in a follow-up article.

Step-by-step guide

  1. Pre-requirements
  2. Add the JavaScript and/or CSS file
  3. Link the JavaScript and/or CSS file to the player

Pre-requirements

Android SDK

Add or confirm you have an assets folder in your project

In Android Studio, if you do not have an assets directory, you can simply add it by right-clicking > new > folder > assets folder:

Once you have the assets folder, it should look like:

Add the JavaScript and/or CSS file

Android SDK

You can drag and drop files into the assets directory, or right-click and create a new file.

The JavaScript-file can directly refer to the player variable on which you can perform many actions, for example:

player.source = {
"sources": {
"src": "//cdn.theoplayer.com/video/elephants-dream/playlist.m3u8",
"useCredentials": false
}
}

iOS SDK

You can 'Add Files to "<YOUR_PROJECT>"' to include new JavaScript or CSS files.

Link the JavaScript and/or CSS file to the player

Android SDK

You can do this either by XML:

<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" />

Or directly in the player config in Java:

THEOplayerConfig playerConfig = new THEOplayerConfig.Builder()
.chromeless(false)
.defaultCss(true)
.cssPaths("path/to/style1.css","path/to/style2.css") // Path is relative to the location of the assets directory
.jsPaths("path/to/script1.js","path/to/script2.js")
.build();
THEOplayerView tpv = new THEOplayerView(this, playerConfig);

iOS SDK

You can do this programmatically through Swift when initialising your THEOplayer instance.

let stylePath = Bundle.main.path(forResource:"style1", ofType: "css")! // style1.css
let scriptPath = Bundle.main.path(forResource:"script1", ofType: "js")! // script1.css
let playerConfig = THEOplayerConfiguration(defaultCSS: true, cssPaths:[stylePath], jsPaths: [scriptPath])
self.theoplayer = THEOplayer(configuration: playerConfig)

Sample resources

Remarks

Relevant documentation can be found at: