Brightcove Player の UI をカスタマイズしてみましょう

最近、仕事で BrightcovePlayer SDK を触る機会がありました。
その際ネット上の関連サンプルを調べたところ、ほとんど Objective-C で書かれたものだったため、今回は Swift でカスタマイズする方法についてまとめてみました。

SDK の追加

BrightcovePlayer SDK がサポートする iOS バージョンは iOS8 以降です。

SDK を CocoaPods から追加する場合、 CocoaPods のバージョンは 1.0 以降が必要です。
Podfile は以下のように書きます。

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!
target 'iOS_Customize_Player_UI' do
    pod 'Brightcove-Player-SDK/dynamic'
end

動画の再生

こちらのサンプルを参照して、 Swift のソースコードを作成します。

そのコードが以下になります。

import BrightcovePlayerSDK
class ViewController: UIViewController, BCOVPlaybackControllerDelegate, BCOVPUIPlayerViewDelegate {
    @IBOutlet weak var videoView: UIView!
    var catalogService: BCOVCatalogService!
    public var playbackController: BCOVPlaybackController!
    var playerView: BCOVPUIPlayerView!
    private static let kViewControllerCatalogToken = "YOUR_TOKEN"
    private static let kPlaylistID = "YOUR_ID"
    override func viewDidLoad() {
        super.viewDidLoad()
        let manager: BCOVPlayerSDKManager = BCOVPlayerSDKManager.shared()
        self.playbackController = manager.createPlaybackController()
        self.playbackController.delegate = self
        self.playbackController.isAutoAdvance = true
        self.playbackController.isAutoPlay = true
        self.playbackController.setAllowsExternalPlayback(true)
        let options = BCOVPUIPlayerViewOptions.init()
        options.presentingViewController = self
        options.hideControlsInterval = 120.0
        options.hideControlsAnimationDuration = 1.0
        let controlView = BCOVPUIBasicControlView.init()
        self.playerView = BCOVPUIPlayerView.init(playbackController: nil, options: options, controlsView: controlView)
        self.playerView.playbackController = self.playbackController
        self.playerView.delegate = self
        self.playerView.frame = self.videoView.bounds
        self.playerView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        self.videoView.addSubview(self.playerView)
        //再生
        self.catalogService = BCOVCatalogService.init(token: ViewController.kViewControllerCatalogToken)
        self.catalogService.findPlaylist(
            withPlaylistID: ViewController.kPlaylistID,
            parameters: [:],
            completion: { playlist,jsonResponse, error in
                guard playlist != nil else {
                    return
                }
                self.playbackController.setVideos(playlist)
            }
        )
    }
}

この時点でプレーヤの UI は未設定なので動画画面には何も表示されず、ただ指定した動画だけが流れるようになっています。

デフォルト UI

BrightcovePlayer のデフォルトで 3 種類の layout が用意されています。 そのデフォルトレイアウトは BCOVPUIPlayerView の controlsView プロパティで設定することができます。

let newControlLayout = BCOVPUIControlLayout.basicVOD()
self.playerView.controlsView.layout = newControlLayout

デフォルト UI は以下に示す 3 種類の見た目になります。

BCOVPUIControlLayout.basicVOD()

BCOVPUIControlLayout.basicLive()

BCOVPUIControlLayout.basicLiveDVR()

カスタマイズ UI の作成 　

今回は UIView のコントロール画面を作って、それを動画画面に addSubview で上に載せるという UI を作成しようと思います。 そのために ControlsView.xib というファイルを作りました。

ControlsView の初期化はクラス ControlsView の中で、

static func newInstance() -> ControlsView {
    return UINib(nibName: "ControlsView", bundle: nil)
        .instantiate(withOwner : nil, options: nil).first as! ControlsView
}

で実現します。

カスタマイズ UI を追加すること自体は難しくないと思いますが、 UI の各ボタンが操作されたときにプレーヤにどうやってその反応を通達するのかという問題があります。 それの解決方法は BCOVPlaybackController#addSessionConsumer : で、カスタマイズ UI のクラスのインスタンスを登録します。

//デフォルト UI を非表示にする
let newControlLayout: BCOVPUIControlLayout? = nil
self.playerView.controlsView.layout = newControlLayout
let controlsView = ControlsView.newInstance()
self.videoView.addSubview(controlsView)
self.playbackController.add(controlsView)

こうすると、 playbackSession : で始まるものは BCOVPlaybackSession プロトコルに準拠したインスタンスが取れます。

func playbackSession(_ session: BCOVPlaybackSession!, didChangeDuration duration: TimeInterval) {
    let player: AVPlayer = session.player
}

ここでなんと！ BCOVPlaybackSession#player で AVPlayer の参照が取れます！ AVPlayer の使い方について言及することはやめておきますが、これで色々とプレーヤに対して指示を出すことができるようになりました。

まとめ

いかがだったでしょうか。 思ったより簡単に使えるライブラリですね。

BrightcovePlayer SDK について興味のある方、ぜひ 以下の公式サイトをご参照ください。 SDK に統合された各プラグインの基本機能を示すサンプルもあります。

公式サイト

Tweet