メインコンテンツへスキップ

＜THEOplayer 使用に関する質問＞ iOS SDKを使い始める

DPSJ サービス担当
更新

 

logo-webheader-dpsj.png

iOS SDKを使い始める

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

このページでは、THEOplayer iOS SDKをiOSアプリで動作させる方法をステップバイステップで説明しています。それは以下をカバーします。

 

　１．新しいiOSプロジェクトの作成

　２．THEOplayer SDKを設定する

　３．THEOplayer iOS APIの使用

　４．イベントリスナーの使用

 

この例では、Xcodeバージョン12.0.1 (12A7300)とmacOS Catalinaバージョン10.15.7を使用しています。

 

⚠ Cocoapods

THEOplayer v2.83.0以降は、Cocoapodsで管理することができます。詳しくは https://github.com/THEOplayer/theoplayer-sdk-ios（英文）をご参照ください。

 

 

前提条件

　・Xcodeをダウンロードしてインストールします。

　・THEOplayer開発者ポータル（https://portal.theoplayer.com）からTHEOplayer iOS SDKを入手してください。

　　ビデオプレーヤーを設定する際に必要となりますので、以下のスクリーンショットにあるように、ライセンス文字列

　　を用意してください。

theoplayer-ios-sdk-license-string.png

 

 

iOSプロジェクトの新規作成

新規プロジェクトの作成手順です。

　１．新しいプロジェクトを作成します（cmd + shift + n）

　２．新しいアプリを選択し、「次へ」をクリックします

getting-started-with-ios-sdk-01.png

 

　３．プロジェクトの詳細を入力し、インターフェースを「ストーリーボード」に設定して「次へ」を

　クリックします

getting-started-with-ios-sdk-02.png

 

ディレクトリの場所を選択すると、以下のスクリーンショットのような画面が表示されます。

getting-started-with-ios-sdk-03.png

 

 

THEOplayer SDKフレームワークの設定

Cocoapodsを使用していない場合は、THEOplayer SDKを手動でロードして設定することができます。まず、https://portal.theoplayer.com からTHEOplayer iOS SDKをダウンロードします。

Finder」を開き、THEOplayerSDK.frameworkをプロジェクト・ディレクトリにドラッグします。

 

getting-started-with-ios-sdk-04.png

 

この画面がポップアップします。下記の設定が選択されていることを確認し、終了をクリックします。

getting-started-with-ios-sdk-05.png

 

プロジェクトの設定画面(1)で、「一般」タブ(2)を選択し、THEOplayerSDK.frameworkが埋め込まれ、サインインされていることを確認してください。(3) 必要に応じて「+」で追加してください。

getting-started-with-ios-sdk-06.png

 

ビルド時にフレームワークが正しく追加されるかどうかを検証します。

プロジェクトの設定で「Build Phases」タブを開きます。次に、「Embed Frameworks」セクションに移動し、THEOplayerSDK.frameworkが存在することを確認します。

getting-started-with-ios-sdk-07.png

 

 

THEOplayer SDKを使ってアプリを開発する

THEOplayerを使った最小限のアプリの手順：

　１．ViewControllerを開きます。

　ファイルは以下のようになっているはずです。

getting-started-with-ios-sdk-08.png

 

　２．THEOplayerSDKをインポートします。

import THEOplayerSDK

 

　３．setupTheoPlayer()関数を作成します。

　この関数は、プレーヤーのすべての初期寸法を設定し、呼び出されたときにビューに追加します。

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)
}

your_license_hereを、「前提条件」に記載されているライセンス文字列に置き換えることを忘れないでください。

 

　４．sampleSourceを定義します。

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

 

　５．viewDidLoad()でプレーヤーを設定する際に、インスタンスへの参照を保持することが重要です。

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

 

その結果、次のようなスニペットができました。

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"
            )
        )
    }
}

 

 

イベントリスナーの追加と削除手順

　１．var listenersを追加します。ViewController に [String: EventListener] = [:] を追加します。

var theoplayer: THEOplayer!
var listeners: [String: EventListener] = [:]

 

　２．再生や一時停止のイベントでEventListenersを作成、削除する関数を書きます。

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")
    }
}

 

　３．setupTheoPlayer()関数にattachEventListeners()を追加し、Theoplayerの初期化時にEventListenersを作成します。

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()
   }

 

　４．viewWillDisappear()メソッドを修正して、現在のビューが非アクティブになったときに以前作ったEventListenersも削除するようにします。

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

 

フルコードの概要

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")
    }
}

 

最後に、チュートリアルが正常に完了したことを確認します。

　・アプリケーションを実行します。シミュレータを起動したり、自分の物理的なデバイスを使用する

　　ことができます。

　・大きな再生ボタンをクリックしてください。

 

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

logo-webfooter-dpsj.png

www.dpsj.co.jp

日本デジタル・プロセシング・システムズ株式会社
東京都新宿区新宿2丁目5−12 FORECAST新宿AVENUE 6F東京都港区新橋 6-19-13 1F
TEL（代）: 03-6746-0231

Twitter

Facebook

Copyright © 2021, Digital Processing Systems Japan K.K. All rights reserved.
Powered by Zendesk