tvOS用のネイティブSDKを使用したAppleTVUIコントロール

このトピックでは、tvOS用のBrightcove PlayerSDKが提供する再生コントロールについて学習します。

概要

tvOS 用 Brightcove ネイティブ SDK を使用して Apple TV アプリを構築すると、動画コンテンツ内を移動したり、動画のアスペクト比を変更したり、動画情報を取得したり、字幕やオーディオ設定を管理したりできる一連の再生コントロールが得られます。

tvOS 用の Brightcove ネイティブ SDK が提供するコントロールには、次のものがあります。

クロックタイムも表示できるプログレスバー
ビデオ情報、字幕、オーディオのトップタブバー
トップタブバーに独自のカスタムビューとコントロールを追加する機能

使用されるコントロールとジェスチャーは、AVKitインターフェイスにあるものと似ているため、ユーザーにはよく知られています。

Brightcove のサーバー側広告挿入 (SSAI) を使用すると、広告再生中にユーザー独自の外観が表示されます。

ネイティブ SDK の使用の詳細については、 Brightcove Player SDK for tvOS ドキュメントの概要を参照してください。

サポートされているバージョン

Apple TV の UI コントロールは、次のバージョンで使用できます。

デバイスOSのバージョン

tvOS 9+

ネイティブSDKバージョン

iOS 版Brightcoveネイティブ SDK バージョン 6.3.0 以降

Siri リモート

Siri リモコンを使用すると、Apple TV を操作できます。以下に、その使用方法をいくつか挙げます。

Siri に聞いて、視聴したいものを見つけてください。
Touch サーフェスを使用して、画面内を移動したり、スワイプ、ハイライト表示、項目を選択したりできます。
コントロールボタンを押して、コンテンツをすばやく再生/一時停止し、音量を調整し、ホーム画面とメニュー画面に移動します。

詳細については、「Apple の Apple TV で Siri リモコンを使用する」を参照してください。

再生コントロール

Apple Siri リモコンのジェスチャーとボタンを押して再生を制御します。アプリで使用できるアクションの一部を以下に示します。詳細については、以下を参照してください。

プログレスバー

Apple Siri Remote トラックパッドを 1 回タップすると、進行状況バーの表示/非表示が切り替わります。再生を一時停止すると、左右にパンするとビデオを前後に移動できます。

スクラブの場合、ユーザーはクリックしたままにし、左右にパンすることで、ビデオを早送りまたは逆方向に動かすことができます。

ビデオの再生中に、ユーザーは Siri Remote トラックパッドの左四分の一をダブルクリックして 10 秒前にジャンプするか、トラックパッドの右四分の一をダブルクリックして 10 秒前にジャンプします。

ビデオ縦横比

Apple Siri Remote トラックパッドをダブルタップすると、3 つの標準的なビデオアスペクト比が切り替わります。

縦横比を考慮したレターボックス（フルビデオ表示）
アスペクト比を尊重したフルスクリーン（ビデオが切り取られる場合があります）
全画面に収まるように拡大したビュー (縦横比は無視されます)

トップタブバー

Apple Siri Remote トラックパッドを下にスワイプすると、トップメニューが表示され、進行状況ビューが非表示になります。表示されたら、上にスワイプするとトップメニューが非表示になります。

タブバーには次の既定の項目があります。

情報
字幕
音声

各タブバー項目に関連付けられたテキストラベルを変更することも、タブバー内に独自のカスタムビューを作成することもできます。

情報

[ 情報 ] トップメニュー項目を選択すると、現在ロードされているビデオに関連付けられたタイトル、説明、長さが表示されます。このデータは Playback API のビデオのメタデータから取得されますが、ビデオのロード時に独自のテキストを設定できます。

字幕

[ 字幕 ] トップメニュー項目を選択すると、動画に関連付けられたキャプションを表示するオプションが表示されます。ここでは、再生中に表示する字幕/キャプションを管理できます。

音声

[ Audio ] トップメニュー項目を選択すると、ビデオの再生中に使用できるオーディオオプションが表示されます。

カスタム

tvOS 用 Brightcove ネイティブ SDK を使用すると、タブバーに独自のビューを簡単に追加できます。ビューには、必要な標準 UIKit ビューまたはコントロールを含めることができます。

SSAIとの広告

Brightcove のサーバー側広告挿入 (SSAI) の使用時に、コンテンツの再生に加え、広告モードが追加されました。このモードには、次の機能が含まれます。

ユーザーが過去の広告をスクラブするのを防ぐ機能
広告休憩の残り時間と広告に関するフィードバックを表示する

サンプル

Apple TV コントロールを体験し、カスタムタブバーの項目ビューを作成する方法については、次のコードサンプルを参照してください。

アップルのテレビのUIコントロール

ライブ/ライブDVR

Apple TV アプリで作業する場合、tvOS 用 Brightcove ネイティブ SDK はライブストリームと DVR の両方のライブストリームをサポートします。DVR Live を使用すると、ユーザーは次の操作を実行できます。

進行状況バーを使用して過去の瞬間をシークする
現在のライブモーメントに戻って、コンテンツをリアルタイムで視聴する

再生の実装

Apple TV アプリからライブ録画またはライブ録画ストリームを再生するには、次の操作を行います。

Apple TV の基本的なサンプルコードから始めます。Xcode でプロジェクトを開き、 ViewController.swift ファイルを開きます。

createTVPlayerView()関数で、playerTypeliveをまたはのいずれかに設定します。liveDVR。

playerView = BCOVTVPlayerView(options: options)
if (playerView != nil) {
playerView!.frame = self.videoContainerView.bounds
playerView!.playerType = BCOVTVPlayerType.liveDVR;
self.videoContainerView.addSubview(playerView!)
}

viewDidLoad()関数を見つけます。
createSampleTabBarItemView()この関数の呼び出しは任意で、タブバーにカスタムビューを作成する方法を示しています。この例では、この関数への呼び出しをコメントします。
requestContentFromPlaybackService()関数への呼び出しをコメントします。

viewDidLoad()関数で、閉じ括弧の前に、次の操作を行うコードを追加します。

override func viewDidLoad()
{
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.

createTVPlayerView()

//        createSampleTabBarItemView()

// Create and configure the playback controller
playbackController.delegate = self
playbackController.isAutoAdvance = true
playbackController.isAutoPlay = true

// Link the playback controller to the Player View
playerView?.playbackController = playbackController

//        requestContentFromPlaybackService()

// live stream
let url = URL(string: "your live stream url")

let video: BCOVVideo = BCOVVideo(hlsSourceURL:url )
self.playbackController.setVideos([video] as NSArray)
}

ライブまたはライブ録画ストリームの URL 文字列を定義します。
前のステップのライブまたはライブ DVR ストリーム URL BCOVVideoを使用してオブジェクトを作成します。
setVideos()関数を呼び出して、playbackControllerの再生キューにライブストリームを追加します。このキューは、自動的に再生を開始するように設定されます。

ライブストリームインジケータ

TvOS 用 Native SDK によって提供される進行状況バーは、ライブストリームには入力されません。進行状況バーの下のインジケータは、ストリームがライブ状態と一時停止されたときにユーザーに通知されます。

ライブDVRプログレスバー

進行状況バーの下のインジケータは、ストリームがライブ状態と一時停止されたときにユーザーに通知されます。

ライブストリームをリアルタイムで見ている間、プログレスバーは完全に塗りつぶされます。ストリームで以前にシークすると、次のようになります。

ページコンテンツ