iOS環境

Prev Next

Classic/VPC環境で利用できます。

iOS環境では、iOS専用プレイヤー開発のための Video Player Enhancement iOS SDKの使用方法とプレイヤー適用およびオプション設定方法について説明します。

参考

iOS用 Video Player Enhancement SDKを使用するためには、Standard料金プランを利用する必要があります。ご利用のためには、次のような仕様が要求されます。

  • 最小仕様: iOS 14.0以上
  • 開発環境: Xcode

SDKのインストールと環境設定

SDKをインストールしてフレームワークを追加する方法は、次の通りです。

  1. NAVERクラウドプラットフォームコンソールの Region メニューや Platform メニューから利用中の環境をクリックします。
  2. Services > Media > Video Player Enhancement メニューを順にクリックします。
  3. Video Player Management メニューをクリックします。
  4. プレイヤーリストから SDKをダウンロードするプレイヤーの [SDKアドレス] ボタンをクリックします。
  5. モバイルネイティブ SDKsダウンロード の [IOS] ボタンをクリックします。
  • 圧縮ファイルがダウンロードされます。
  1. Xcodeを実行したら、追加したいプロジェクトの Targets > General メニューを順にクリックします。
  2. Framework, Libraries, and Embedded Content に 「NCPlayerSDK.xcframework」を Embed & Sign タイプで追加します。

プレイヤーの適用と設定

プレイヤーを適用してオプションを設定するためには、次の手順に従います。

1. 初期化

次のように NCPlayerSDKインスタンスを初期化し、Delegateを設定します。

import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{
    ...

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
			
        NCPlayer.shared.delegate = self
    }
}

2. プレイヤー設定

プレイヤーを設定する方法は、次の通りです。

  1. NAVERクラウドプラットフォームコンソールの Region メニューや Platform メニューから利用中の環境をクリックします。

  2. Services > Media > Video Player Enhancement メニューを順にクリックします。

  3. Video Player Management メニューをクリックします。

  4. 設定するプレイヤーの [SDKアドレス] ボタンをクリックします。

  5. Player SDKアドレスのポップアップが表示されたら、 SDKアドレス から access_key値を確認します。
    vpe-ios_key_ko

  6. Xcodeで NCPlayerViewを参照する Classと UIViewを作成します。

  7. プレイヤーのオプションを設定します。

    • プレイヤー設定とこのガイドのプレイヤー設定スクリプトをご参照ください。
    class player:NCPlayerView{}

class ViewController: UIViewController, NCPlayerDelegate {  
@IBOutlet weak var playerView: player?
}
override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    // SDKを初期化
    //licenseKey = access_key
    let licenseKey = "{access_key}"

    // プレイヤーオプション(コンソールで作成されたスクリプトコードを使用)
    let playerOptions = """
    {
        "playlist":[
            {
                "file":"https://CDNドメイン/example_video_01.mp4",
                "poster":"https://CDNドメイン/example_video_01.png",
            }
        ],
        "autostart":true,
        }

    """

    NCPlayer.shared.initialize(licenseKey: licenseKey)
    NCPlayer.shared.delegate = self

    // 実行
    playerView?.play(playerOptions)

}

3. イベント設定

Player Event APIを通じて Video Player Enhancementプレイヤーで発生するイベントバインドして活用できます。方法は次の通りです。

  1. NCPlayerNetworkStatus メソッドを利用してデバイスのネットワーク接続状態を確認します。
    import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{
...

    func NCPlayerNetworkStatus(state: String) {
    // state: satisfied = 異常なし(ONLINE)
    // state: unsatisfied = 問題発生(OFFLINEまたは通信障害発生)
    // state: requiresConnection = 現在は利用できないが、インターネットに接続すれば利用可能
    }
}
  2. 設定したいイベントに応じて設定方法を確認します。

横向きモード有効化イベント

デバイスを横向きに切り替える際にイベントを発生させるには、NCPlayerIsLandscape メソッドを利用して次のように設定します。

import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{
    ...

    func NCPlayerIsLandscape(state: Bool) {

    }
}

スクリーンキャプチャ検知イベント(iOS専用)

スクリーンキャプチャ時にイベントを発生させるには、NCPlayerIsCaptured メソッドを利用して次のように設定します。

import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{
    ...
	
    func NCPlayerIsCaptured(state: Bool) {

    }
}

OS画面録画検知イベント(iOS専用)

画面録画時にイベントを発生させるには、NCPlayerIsRecording メソッドを利用して次のように設定します。

import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{
    ...
	
    func NCPlayerIsRecording(state: Bool) {

    }

}

TimeUpdateイベント

再生時間変化検知時にイベントを発生させるには、NCPlayerOnTimeUpdate メソッドを利用して次のように設定します。

import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{
    ...
	
    func NCPlayerOnTimeUpdate(data: Dictionary<String, Any>?) {
    //data = ["duration": 117, "percent": 31.26565391099825, "viewingTime": 37, "currentTime": 37, "sourceType": vod]
    }

}
参考

各プロパティの詳しい説明は、timeupdateスクリプトをご参照ください。

PrevTrackイベント

プレイリストの前の動画へ移動する際にイベントを発生させるには、NCPlayerOnPrevTrack メソッドを利用して次のように設定します。

import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{
    ...
	
    func NCPlayerOnPrevTrack(data: Dictionary<String, Any>?) {

    }
}
参考

各プロパティの詳しい説明は、prevTrackスクリプトをご参照ください。

NextTrackイベント

プレイリストの次の動画へ移動する際にイベントを発生させるには、NCPlayerOnNextTrack メソッドを利用して次のように設定します。

import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{
    ...
	
    func NCPlayerOnNextTrack(data: Dictionary<String, Any>?) {

    }

}
参考

各プロパティの詳しい説明は、nextTrackスクリプトをご参照ください。

コントロールバー有効化イベント

プレイヤーでコントロールバーを有効/無効にする際にイベントを発生させるには、NCPlayerOnControlbarActive メソッドを利用して次のように設定します。

import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{
    ...
	
    func NCPlayerOnControlbarActive(active: Bool) {
        // active: true , false
    }
}

再生イベント

プレイヤーで動画を再生する際にイベントを発生させるには、NCPlayerOnPlay メソッドを利用して次のように設定します。

import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{
    ...
	
    func NCPlayerOnPlay() {

    }
}

一時停止イベント

プレイヤーで動画を一時停止する際にイベントを発生させるには、NCPlayerOnPause メソッドを利用して次のように設定します。

import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{
    ...
	
    func NCPlayerOnPause() {

    }
}

再生完了イベント

プレイヤーで動画再生が完了する際にイベントを発生させるには、NCPlayerOnEnd メソッドを利用して次のように設定します。

import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{
    ...
	
    func NCPlayerOnEnd() {

    }
}

フルスクリーンイベント

フルスクリーンへの切り替え時にイベントを発生させることができ、デバイス回転方向に応じてフルスクリーンに切り替えするように設定できます。

プレイヤーをフルスクリーンに切り替える際にイベントを発生させるには、NCPlayerOnFullscreen メソッドを利用して次のように設定します。

import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{
    ...

    // フルスクリーンが解除した時に発生するイベント
    func NCPlayerOnFullscreenOff() {

    }

    // フルスクリーンに切り替わった時に発生するイベント
    func NCPlayerOnFullscreenOn() {

    }

    // フルスクリーンに切り替わった時の区別 true/false
    func NCPlayerOnFullscreen(state: Bool?) {

    }
}

ボタンまたはデバイスの回転方向を検知してフルスクリーンに切り替えるように設定するには、NCPlayerRequestOrientation メソッドを次のように設定します。

import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{

    var currentOrientationMask: UIInterfaceOrientationMask = .portrait
    var currentOrientation: UIInterfaceOrientation = .portrait
    
        // 横向きにするとフルスクリーン、縦向きにすると解除
        func NCPlayerRequestOrientation(orientation: String) {
            if (orientation == "landscape") {
                currentOrientationMask = .landscape
                currentOrientation = .landscapeRight
            } else {
                currentOrientationMask = .portrait
                currentOrientation = .portrait
            }
            applyOrientation(orientation: currentOrientation)
        }
        
        override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
            return currentOrientationMask;
    }
    override var preferredInterfaceOrientationForPresentation: UIInterfaceOrientation {
        return currentOrientation;
    }
    override var prefersStatusBarHidden: Bool {
        return currentOrientation.isLandscape
    }
}
extension NSLayoutConstraint {
    func applyAspectRatio(view: UIView, ratio: CGFloat) -> NSLayoutConstraint {
        let newConstraint = NSLayoutConstraint(item: self.firstItem!, attribute: self.firstAttribute, relatedBy: self.relation, toItem: self.secondItem, attribute: self.secondAttribute, multiplier: ratio, constant: self.constant)
        view.removeConstraint(self)
        view.addConstraint(newConstraint)
        view.layoutIfNeeded()
        return newConstraint
    }
}

}

デバイスの回転方向を検知してフルスクリーンに切り替えるように設定するには、NCPlayerIsLandscape メソッドを次のように設定します。

import NCPlayerSDK
...
class ViewController: UIViewController, NCPlayerDelegate{
    
    var currentOrientationMask: UIInterfaceOrientationMask = .portrait
    var currentOrientation: UIInterfaceOrientation = .portrait
    
    func NCPlayerIsLandscape(state: Bool) {
        if state {
            currentOrientationMask = .landscape
            currentOrientation = UIDevice.current.orientation == .landscapeLeft ? .landscapeRight : .landscapeLeft
        }else{
            currentOrientationMask = .portrait
            currentOrientation = .portrait
        }
        
        applyOrientation(orientation: currentOrientation)
    }
    
    override var supportedInterfaceOrientations: UIInterfaceOrientationMask {
        return currentOrientationMask;
    }
    
    override var preferredInterfaceOrientationForPresentation: UIInterfaceOrientation {
        return currentOrientation;
    }
    
    override var prefersStatusBarHidden: Bool {
        return currentOrientation.isLandscape
    }
}
extension NSLayoutConstraint {
    func applyAspectRatio(view: UIView, ratio: CGFloat) -> NSLayoutConstraint {
        let newConstraint = NSLayoutConstraint(item: self.firstItem!, attribute: self.firstAttribute, relatedBy: self.relation, toItem: self.secondItem, attribute: self.secondAttribute, multiplier: ratio, constant: self.constant)
        view.removeConstraint(self)
        view.addConstraint(newConstraint)
        view.layoutIfNeeded()
        return newConstraint
    }
}

}