iOS向けプレイヤー適用

Prev Next

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

iOS用プレイヤーの適用では、Video Player Enhancement iOS SDKを活用して iOS用 Nativeプレイヤーを適用して設定するためのユースケースを紹介します。

参考

iOS SDKのユースケースを実行するには Standardプランを利用する必要があり、以下の環境が要求されます。

  • Xcode
  • 外部との通信が可能な環境

プレイヤー適用

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

  1. Xcodeを実行します。
  2. 追加するプロジェクトの Targets > General メニューを順にクリックします。
  3. Framework, Libraries, and Embedded Content に 「NCPlayerSDK.xcframework」を Embed & Sign タイプで追加します。
  4. 使用する VCに NCPlayerSDKを読み込みます。
  5. Classを作成した後、NCPlayerViewをご参照ください。
    vpe-example-ios_view
  6. Viewの Classを PlayerViewに指定します。
    vpe-example-ios_playerview

プレイヤー設定

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

  1. 以下のコードを適用して VCの NCPlayerView Classを初期化します。

    class PlayerView:NCPlayerView{}
class ViewController: UIViewController {
    // viewと接続
    @IBOutlet weak var playerView: PlayerView?
}

  2. override func viewDidAppearを作成した後、以下のコードを適用します。

    参考
    • NCPlayerViewオブジェクトが作成された状態でのみメソッドを呼び出すことができます。
    • Bundle IDはコンソールに登録したアプリパッケージ IDと同じである必要があります。
    var defaultBackground: UIColor? = .white
func updateBackgroundColor() {
      if UIDevice.current.orientation.isLandscape {
          self.view.backgroundColor = .black
      } else {
          self.view.backgroundColor = defaultBackground
      }
  }

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    defaultBackground = self.view.backgroundColor

    updateBackgroundColor()
}

override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
    updateBackgroundColor()
}

override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        // SDKを初期化
        // ライセンスキーを入力
        let licenseKey = "{ユーザーのライセンスキー}"

        // プレイヤーオプションを入力(コンソールで作成されたスクリプトオプションを使用)
        let playerOptions = """
         {
            "playlist":[
                {
                    "file":"https://pdeubxscnimo10174288.cdn.ntruss.com/hls/uqyCPUeJ1Ne8ml9OtPsizg__/shorts24/j5IXBfIJ83893893_shorts,1080,720,480,p.mp4.smil/master.m3u8",
                    "poster":"https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/   202211/083fff831d8904cd9d9c180e5c10be0b.png",
                 "description":{
                        "title":"NAVERクラウドテスト動画1",
                        "created_at":"2022.07.13",
                     "profile_name":"NAVERクラウド",
                        "profile_image":"https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202208/d127c8db642716d84b3201f1d152e52a.png"
                    },
                },
               {
                   "file":"https://pdeubxscnimo10174288.cdn.ntruss.com/hls/uqyCPUeJ1Ne8ml9OtPsizg__/shorts24/j5IXBfIJ83893893_shorts,1080,720,480,p.mp4.smil/master.m3u8",
                   "poster":"https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202211/083fff831d8904cd9d9c180e5c10be0b.png",
                   "description":{
                       "title":"NAVERクラウドテスト動画2",
                       "created_at":"2022.07.13",
                       "profile_name":"NAVERクラウド",
                       "profile_image":"https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202208/d127c8db642716d84b3201f1d152e52a.png"
                   },
               },
               {
                   "file":"https://pdeubxscnimo10174288.cdn.ntruss.com/hls/uqyCPUeJ1Ne8ml9OtPsizg__/shorts24/j5IXBfIJ83893893_shorts,1080,720,480,p.mp4.smil/master.m3u8",
                   "poster":"https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202211/083fff831d8904cd9d9c180e5c10be0b.png",
                   "description":{
                       "title":"NAVERクラウドテスト動画3",
                       "created_at":"2022.07.13",
                       "profile_name":"NAVERクラウド",
                       "profile_image":"https://nnbkegvqsbcu5297614.cdn.ntruss.com/profile/202208/d127c8db642716d84b3201f1d152e52a.png"
                   },
               }
            ],
            "autostart":true,
            "muted":true,
            "keyboardShortcut":true,
            "controls":true,
            "ui":"pc",
            "controlBtn":{
                "play":true,
                "fullscreen":true,
                "volume":true,
                "times":true,
                "pictureInPicture":true,
                "setting":true,
            },
            "progressBarColor":"#ff0000",
            "controlActiveTime":3000,
            "startMutedInfoNotVisible":false,
            "aspectRatio":"16/9",
            "objectFit":"contain",
            "playRateSetting":[0.5,0.75,1,1.5,2],
            "seekingPreview":true,
            "autoPause":false,
            "repeat":false,
            "touchGestures":true,
            "descriptionNotVisible":false,
            }

         """

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

        playerView?.play(playerOptions)
    }

  3. ViewControllerに NCPlayerDelegateを継承した後、関数を作成します。
    vpe-example-ios_delegate

  4. 以下のコードを適用してイベントを設定します。

        //ネットワーク状態の確認
func NCPlayerNetworkStatus(state: String) {
    print("networkStatus: \(state)")
}
    // フルスクリーン状態の有無
func NCPlayerOnFullscreenState(state: Bool) {
    print("onFullscreenState: \(state)")
}
    // 横向きモードの有無
func NCPlayerIsLandscape(state: Bool) {
    print("isLandscape: \(state)")
}

    // 現在の再生時間が変更されるときに発生するイベント
func NCPlayerOnTimeUpdate(data: Dictionary<String, Any>?) {
    if let data = data {
        print("time: ",data)
    }
}

    // 前の動画へ戻るときに発生するイベント
func NCPlayerOnPrevTrack(data: Dictionary<String, Any>?) {
    if let data = data {
        print("NCPlayerOnPrevTrack: ",data)
    }
}

    // 次の動画へ進むときに発生するイベント
func NCPlayerOnNextTrack(data: Dictionary<String, Any>?) {
    if let data = data {
        print("NCPlayerOnNextTrack: ",data)
    }
}

    // コントロールバーの有効化・無効化の確認
func NCPlayerOnControlbarActive(active: Bool) {
    print("NCPlayerOnControlbarActive: ",active)
}

    // 動画再生試行に成功すると発生するイベント
func NCPlayerOnPlay() {
    print("NCPlayerOnPlay: play")
}

    // 動画が一時停止したときに発生するイベント
func NCPlayerOnPause() {
    print("NCPlayerOnPause: pause")
}

    // 再生が最後まで完了したときに発生するイベント
func NCPlayerOnEnd() {
    print("NCPlayerOnEnd: end")
}
    // キャプチャ状態の確認
func NCPlayerIsCaptured(state: Bool) {
    print("NCPlayerIsCaptured: \(state)")
}
    // 録画状態の確認
func NCPlayerIsRecording() {
    print("録画")
}
   // フルスクリーンが OFF
func NCPlayerOnFullscreenOff() {
    print("NCPlayerOnFullscreenOff: Off")
}
    // フルスクリーンが ON
func NCPlayerOnFullscreenOn() {
    print("NCPlayerOnFullscreenOn: On")
}
    // フルスクリーンの有無 true or false
func NCPlayerOnFullscreen(state: Bool?) {
    if let state = state {
        print("NCPlayerOnFullscreen: \(state)")
    }

}