New Player Skin for Android

The new Ooyala Skin SDK replaces the default controls provided by the Ooyala SDK for Android. This new player skin allows for enhanced UI/UX customizations that you can apply across your Android, iOS, and HTML5 (V4) players.

Documentation

Prerequisites

SDK Access

Go to Ooyala Downloads and get the latest version of:
  • the Ooyala mobile SDK for Android (the skin is supported for version 4.6.0+)
  • the latest version of the Ooyala Skin SDK for Android

Technical Expertise

To be successful running the sample app, you will need to understand the Android Developer ecosystem, including building, running, and publishing applications.

You will also need to understand the Core Ooyala SDK, and how to configure and run simple Ooyala integrations (see https://github.com/ooyala/android-sample-apps).

You should also be familiar with brew, git, and node.

Ooyala Player Skin for Android is supported on devices running Android v4.4+.

Repositories

You can clone, host, fork, and modify a forked version of the skin-config and native-skin repositories.
Warning: Ooyala will support any pre-defined and valid modifications to the skin.json file. If you fork the skin-config repository and make non-valid modifications, or if you fork the native-skin repository and make changes, we will not offer technical support for these changes.

Try the Sample App

To try out the sample app, follow these steps in Getting Started with the Skin Sample Application for Android to set up the project.

Try the Player V4 Compiled SDK

You can try the BasicPlaybackSampleApp on your machine using the Compiled SDK. Follow the steps described in Updating an Existing Application with the Android Skin.

Customization Options

For this release, the players (HTML5, iOS, and Android) offer the following degrees of customization:
  • No customization. Use the default player with standard, out of the box settings.
  • Easy customization via a JSON config file that applies across environments.
  • Advanced customization. Developers can fork the player repositories and customize the source code.
The degree of customization depends entirely on your requirements. For details, see Customizing the Player V4 Appearance.

React Native

Local Hosting: React Native provides a way to quickly debug and test JavaScript code. It does this by hosting a Node server that packages all of the JavaScript files dynamically, and puts that into the sample app.

JSBundle: React Native supports a solution where you pre-package all of your JavaScript files into one (called a JSBundle), which you then manually insert into your application.
Note: Local hosting requires you to have a server constantly running to provide the JavaScript. Furthermore, to test on physical devices, they require access to the server (usually by setting the IP address in the sample app). The JSBundle allows you to run the application without any need for a server.
Since Facebook no longer distributes the latest versions of the React Native AAR files with maven repositories, the React Native file is now distributed with OoyalaSkinSDK.jar. To integrate React Native with the OoyalaSkinSDK:
  1. Download and unzip OoyalaSkinSD-Android.zip.
  2. Copy the OoyalaSkinSDK.jar file into the app's libs/ directory.
  3. Copy the react-native-0.33.0.aar file into the app's libs/ directory.
  4. Modify your app gradle build file configuration to include OoyalaSkinSDK and React support, as shown in the following gradle build file snippet:
    android {
        compileSdkVersion 23
        buildToolsVersion "23.0.0"
        defaultConfig {
            ...
            minSdkVersion 16
            targetSdkVersion 21
            ndk {
                // React Native for Android is incompatible with 3rd-party 64-bit libraries.
                abiFilters "armeabi-v7a", "x86"
            }
        }
        ...
    }
    
    repositories {
      jcenter()
      flatDir
        { dirs 'libs' }
    }
    
    dependencies {
        compile files('libs/OoyalaSDK.jar')
        compile files('libs/OoyalaSkinSDK.jar')
        compile 'com.android.support:appcompat-v7:23.4.0'
        compile 'com.android.support:recyclerview-v7:23.4.0'
        compile 'com.facebook.fresco:fresco:0.11.0'
        compile 'com.facebook.fresco:imagepipeline-okhttp3:0.11.0'
        compile 'com.facebook.stetho:stetho:1.2.0'
        compile 'com.facebook.soloader:soloader:0.1.0'
        compile 'com.facebook.stetho:stetho-okhttp:1.2.0'
        compile 'com.fasterxml.jackson.core:jackson-core:2.2.3'
        compile group: 'com.google.code.findbugs', name: 'jsr305', version: '3.0.0'
        compile 'com.squareup.okhttp3:okhttp:3.4.1'
        compile 'com.squareup.okhttp3:okhttp-ws:3.4.1'
        compile 'com.squareup.okhttp3:okhttp-urlconnection:3.4.1'
        compile 'com.squareup.okio:okio:1.9.0'
        compile group: 'org.webkit', name: 'android-jsc', version: 'r174650'
        compile(name:'react-native', version:'0.33.0', ext:'aar')
        compile 'javax.inject:javax.inject:1'
    }                               
                                
See Player V4 Skin and the React Application Framework for more information.

Was this article helpful?