logo
SDKs
IntroductionHow to update an SDK?THEOplayer 5.0 - Native Mobile iOS/tvOS and Android SDKs
Web
Getting started on Web (Extended)Getting started with the new Web UIGetting started on WebAPI examplesHow to implement Keyboard HotkeysHow to embed an iframeHow 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 barHow to play an LCEVC source with THEOplayerHow to use WebXR with THEOplayer
Android legacy (4.12.x)
Getting started on Legacy Android SDK (4.12.x)Legacy Android SDK (4.12.x) customizationHow 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
Android
Getting started with the Android UIGetting started on AndroidAndroid Feature IntegrationsMigration from THEOplayer Android/AndroidTV/FireTV SDK 4.x to THEOplayer Android SDK 5.0
iOS legacy (4.12.x)
Getting started on iOSiOS/tvOS SDK and Legacy iOS/tvOS SDK (4.12.x) 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/tvOS SDK and Legacy iOS/tvOS SDK (4.12.x) 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
iOS
Getting started guide for THEOplayer iOS/tvOS SDK 5.0THEOplayer iOS/tvOS 5.0 Feature IntegrationsMigration from THEOplayer iOS and tvOS SDK 4.x to THEOplayer iOS/tvOS SDK 5.0
Android TV Legacy (4.12.x)
Getting started on Android TV Legacy (4.12.x)
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 Legacy (4.12.x)
Getting started on Fire TV Legacy (4.12.x)
Frameworks

Getting started on iOS

This page is a step-by-step guide on how to get THEOplayer iOS SDK running on iOS/iPadOS apps. It will cover:

  1. Creating a new iOS project
  2. Configuring the THEOplayer SDK
  3. Using the THEOplayer iOS API
  4. Using event listeners

This example uses Xcode version 12.0.1 (12A7300) and macOS Catalina version 10.15.7.

info Cocoapods

THEOplayer v2.83.0 and above can be managed through Cocoapods. Refer to https://github.com/THEOplayer/theoplayer-sdk-ios for more information.

Prerequisites

  • Download and install Xcode.
  • Obtain a THEOplayer iOS SDK through the THEOplayer Developer Portal at https://portal.theoplayer.com.

    • And have the license string handy, as depicted in the screenshot below, because you'll need it when configuring your video player.

Creating a new iOS project

Steps for creating a new project:

  1. Create new project (cmd + shift + n).
  2. Select new App and click 'next'.

getting started with ios sdk 01

  1. Enter project details, set interface to 'storyboard' and click 'next'.

getting started with ios sdk 02

After selecting the directory location, you should see something similar to the screenshot below.

getting started with ios sdk 03

Configure THEOplayer SDK framework

You can manually load and configure the THEOplayer SDK if you're not using Cocoapods. First, download your THEOplayer iOS SDK from https://portal.theoplayer.com.

Open "Finder" and drag your THEOplayerSDK.framework into to the project directory.

getting started with ios sdk 04

This screen pops up. Make sure these settings are selected, and click finish.

getting started with ios sdk 05

Go to the project configuration (1), select the General tab (2), and make sure the THEOplayerSDK.framework is embedded and signed in. (3) Add it with the "+" if necessary.

getting started with ios sdk 06

Validate that the framework will correctly be added during builds:

Go to the Build Phases tab in the project configuration. Then, go to the Embed Frameworks section and check that the THEOplayerSDK.framework is present.

getting started with ios sdk 07

Develop the app using the THEOplayer SDK

Steps for a minimal app using THEOplayer:

  1. Open the ViewController.

    The file should look like this:

    getting started with ios sdk 08

  2. Import THEOplayerSDK.

        import THEOplayerSDK
  3. Make the setupTheoPlayer() function:

    This function sets all the initial dimensions for the player and adds it to the view when called.

    func setupTheoPlayer() {
        var frame: CGRect = UIScreen.main.bounds
        frame.origin.y = 0
        frame.size.height = frame.size.width * 9 / 16
        var playerConfig = THEOplayerConfiguration(pip: nil, license: "your_license_here")
        self.theoplayer = THEOplayer(configuration: playerConfig)
        self.theoplayer = THEOplayer()
        self.theoplayer.frame  = frame
        self.theoplayer.addAsSubview(of: self.view)
    }

    Do not forget to swap your_license_here with the license string mentioned in the "Prerequisites".

  4. Define the sampleSource:

    var sampleSource: SourceDescription {
        return SourceDescription(
            source: TypedSource(
            src: "https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8",
            type: "application/x-mpegurl"
            )
        )
    }
  5. Set up a player during viewDidLoad(), it is important to keep a reference to this instance

    override func viewDidLoad() {
        super.viewDidLoad()
        setupTheoPlayer()
        self.theoplayer.source = sampleSource
        /* Do any additional setup after loading the view.*/
    }

The result is the following snippet:

import UIKit
import THEOplayerSDK

class ViewController: UIViewController {
    var theoplayer: THEOplayer!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTheoPlayer()
        self.theoplayer.source = sampleSource
    }
    
    func setupTheoPlayer() {
        var frame: CGRect = UIScreen.main.bounds
        frame.origin.y = 0
        frame.size.height = frame.size.width * 9 / 16
        
        var playerConfig = THEOplayerConfiguration(pip: nil, license: "your_license_here")
        self.theoplayer = THEOplayer(configuration: playerConfig)
        self.theoplayer.frame =  frame
        self.theoplayer.addAsSubview(of: self.view)
    }

    var sampleSource: SourceDescription {
        return SourceDescription(
            source: TypedSource(
                src: "https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8",
                type: "application/x-mpegurl"
            )
        )
    }
}

Steps for adding and removing event listeners.

  1. Add var listeners: [String: EventListener] = [:] to ViewController

    var theoplayer: THEOplayer!
    var listeners: [String: EventListener] = [:]
  2. Write the functions to create and delete the EventListeners on play and pause events.
class ViewController: UIViewController {
    
    ...

    func attachEventListeners() {
        self.listeners["play"] = self.theoplayer.addEventListener(type: PlayerEventTypes.PLAY, listener: onPlay)
        self.listeners["pause"] = self.theoplayer.addEventListener(type: PlayerEventTypes.PAUSE, listener: onPause)
    }
    
    func removeEventListeners() {
        self.theoplayer.removeEventListener(type: PlayerEventTypes.PLAY, listener: listeners["play"]!)
        self.theoplayer.removeEventListener(type: PlayerEventTypes.PAUSE, listener: listeners["pause"]!)
    }

    func onPlay(event: PlayEvent) {
        print("Play event occured")
    }
    
    func onPause(event: PauseEvent) {
        print("Pause event occured")
    }
}
  1. Add attachEventListeners() to the setupTheoPlayer() function to create the EventListeners when the THEOplayer is initialized.
func setupTheoPlayer() {
       var frame: CGRect = UIScreen.main.bounds
       frame.origin.y = 0
       frame.size.height = frame.size.width * 9 / 16
           
       var playerConfig = THEOplayerConfiguration(pip: nil, license: "your_license_here")
       self.theoplayer = THEOplayer(configuration: playerConfig)
       self.theoplayer.frame =  frame
       self.theoplayer.addAsSubview(of: self.view)
       
       attachEventListeners()
   }
  1. Modify the viewWillDisappear() method to also delete the EventListeners we previously made when the current view is inactive.

    override func viewWillDisappear(_ animated: Bool) {
    super.viewWillDisappear()
    removeEventListeners()
    }

Full code overview:

import UIKit
import THEOplayerSDK

class ViewController: UIViewController {
    var theoplayer: THEOplayer!
    var listeners: [String: EventListener] = [:]

    override func viewDidLoad() {
        super.viewDidLoad()
        setupTheoPlayer()
        self.theoplayer.source = sampleSource
    }
        
    func setupTheoPlayer() {
        var frame: CGRect = UIScreen.main.bounds
        frame.origin.y = 0
        frame.size.height = frame.size.width * 9 / 16
            
        var playerConfig = THEOplayerConfiguration(pip: nil, license: "your_license_here")
        self.theoplayer = THEOplayer(configuration: playerConfig)
        self.theoplayer.frame =  frame
        self.theoplayer.addAsSubview(of: self.view)
        
        attachEventListeners()
    }

    var sampleSource: SourceDescription {
        return SourceDescription(
            source: TypedSource(
            src: "https://cdn.theoplayer.com/video/elephants-dream/playlist.m3u8",
            type: "application/x-mpegurl"
            )
        )
    }
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear()
        removeEventListeners()
    }

    func attachEventListeners() {
        self.listeners["play"] = self.theoplayer.addEventListener(type: PlayerEventTypes.PLAY, listener: onPlay)
        self.listeners["pause"] = self.theoplayer.addEventListener(type: PlayerEventTypes.PAUSE, listener: onPause)
    }
    
    func removeEventListeners() {
        self.theoplayer.removeEventListener(type: PlayerEventTypes.PLAY, listener: listeners["play"]!)
        self.theoplayer.removeEventListener(type: PlayerEventTypes.PAUSE, listener: listeners["pause"]!)
    }

    func onPlay(event: PlayEvent) {
        print("Play event occured")
    }
    
    func onPause(event: PauseEvent) {
        print("Pause event occured")
    }
}

Finally, validate that the tutorial has been completed successfully:

  • Run the application. You can boot a simulator, or use your own physical device.
  • Click the big play button.
github
Make sure to follow us on GitHub!
THEO-logo-white
twitter
facebook
linkedin
Copyright © 2022. All Rights Reserved.
Leuven
New York
Singapore
Barcelona