AVKitで直感的なメディア再生機能を提供する

(音楽)

Delivering Intuitive Media Playback with AVKitです (拍手) 登壇者は私 ジェド･ルイソンと 同僚のダン･ライトです AVKitによるメディア再生の話をします iOSやtvOSでの AVPlayerViewControllerの― ベストプラクティスについても 説明します

AVKitはメディアプレイバック UIフレームワークで― CoreMediaのAVFoundation上に 構築されています AVPlayerベースのメディアコンテンツの 表示や再生を容易にするため― Appleのアプリケーションと同じ ユーザインターフェイスを使います

UIKitアプリケーションには AVPlayerViewControllerを― AppKitアプリケーションには AVPlayerViewを提供します UIKitとAppKitの両方に AVRoutePickerViewを提供し― ワイヤレスのルートピッカーを カスタムプレイバックUIに追加できます コードを見てみましょう iOSやtvOSの AVPlayerViewControllerを― 使い始めるのは とても簡単です 最初にAVPlayerを作ります 次にAVPlayerViewControllerを作り 作ったばかりのPlayerに割り当てます 最後にそれを提出します たったそれだけで― 機能的な メディアプレイバックUIができます ユーザには おなじみのものです Appleのアプリケーションで 使われているのと同じUIだからです いろいろなパワーが潜んでいます AVKitを使う時は― メディアプレイバックオブジェクトを 所有します 自分で作って管理できます 動画レンダリングの 基礎となっているのは― AVPlayerLayerと同じ コアテクノロジーです なのでAVFoundationのパワーを 得られます AVPlayerとAVPlayerItem AVAssetのパワーも含みます AVKitは UIKitとAppKitの上にあるので― それぞれのプラットフォームの ユーザエクスペリエンスを得られます AVKitは両方の利点を備えてます

メディアプレイバックオブジェクトや UIKitやAppKitベースのAPIを使ってる おなじみの再生表示用のAPIも コントロールできます AVKitを大まかに見てきました 次はiOS 13における AVPlayerViewControllerの新しい点です

まずはフルスクリーンコールバックです 埋め込まれたインライン表示から フルスクリーン表示への移行や― フルスクリーン表示の 開始と終了を知らせます 説明するために この動画をご覧ください ユーザはフルスクリーン表示を始め インタラクティブに解除します しかし解除をキャンセルしました 再びフルスクリーンです 最終的にユーザが解除すると― インラインに埋め込まれた AVPlayerViewControllerに戻りました iOS 13で提供する新しいAPIは これらのステートを知らせます AVPlayerViewControllerDelegateを 拡張することによってです フルスクリーンの開始や終了時に 通知があります こんな感じです 新しい２つのデリゲートメソッドです iOS 13 SDKにリンクすると iOS 12以降で使用できます フルスクリーン表示を始めるコードと 終了するコードです 実装を見てみましょう 重要なのはUIViewController TransitionCoordinatorです UIKitの他のView Controller Transitionsと同じです これらの詳細と機能は UIKitのドキュメントで学べます ここで注目したいのは― animateのalongsideTransition コールバックの完了ハンドラです ここを見れば完了したか キャンセルされたか分かります インライン表示からフルスクリーンへの 移行について知る情報源です プレイヤービューコントローラが― フルスクリーンかインライン表示か 知ることは意味があります なぜ大事なのでしょう プレイヤービューコントローラが― スクロールビューに ある場合を考えましょう ユーザがフルスクリーン表示を開始 デバイスが回転して オフセットが変わると― プレイヤービューコントローラが オフスクリーンでスクロールします フルスクリーンの時にオフスクリーンで スクロールしてもユーザに見えません ですがプレイヤービューコントローラは アクティブな状態でないと― フルスクリーン表示が 終了してしまいます 新しいAPIを使うと プレイヤービューコントローラを― 参照すべき時を知ることができます テーブルビューコントローラや コレクションビューが プレイヤービューコントローラを 削除することがあります ユーザがフルスクリーンを終了した時 元に戻るには どうするか そんな時は新しいAPIの willEndバリアントを使います これはアニメーションが始まる前に 呼び出されるので― UIのプレイヤービューコントローラの ロケーションをリセットできます これで すべてが元どおりになります これはフルスクリーンの コールバックです

次はMacのiPadアプリケーションの AVPlayerViewControllerを見ましょう iPadアプリケーションは Macでビルドできます AVPlayerViewControllerも その恩恵を受けます このとおりです AppleのプレイバックUIと 同じユーザインターフェイスです AVPlayerViewControllerが iPadアプリケーションに提供する― すべての機能性を備えています Macプラットフォーム特有の 機能もあります Touch Barサポートや キーボードサポートが使えます

MacのiPadアプリケーション用に― ピクチャ･イン･ピクチャの サポートも追加しました ピクチャ･イン･ピクチャの サポートは― MacのUIKitとAppKitベースの 全アプリケーションに拡大されました MacのiPadアプリケーションで AVPlayerViewControllerを使うため― 必要なコードは何行か

もちろんゼロです (拍手) これがMacのiPadアプリケーションの AVPlayerViewControllerです 次は外部メタデータです コンテンツを AirPlayしているとします その時のロック画面は このようになります こうではありません ２つのものが このようなUI表示を可能にしています まず１つが リモートコントロールコマンドです AVKitが自動的にやるので 何もする必要がありません でも発行したいメタデータが 付加されていないメディアもあります そこで新しいAPIをiOSに追加します tvOSにはすでにありました AVPlayerItemです メタデータに タイトルメタデータや― アートワークメタデータを 補足できます とても簡単です それ以外はこちらがやります

他にiOS 13で改善したのが― AVPlayerViewControllerの カスタムコントロールのサポートです 以前からAVPlayerViewControllerの カスタムコントロールはiOSで使えます しかし画面に表示されていないものが 失われていました インタラクティブな解除や ランドスケープモードのサポート それにキーボードなどです MacのiPadアプリケーションの AVPlayerViewControllerには― Touch Barサポートがあります iOS 13でshowsPlaybackControlsを falseにすると― AVPlayerViewControllerを モーダルに表示できます カスタムコントロールを contentOverlayViewに置きます するとカスタムプレイバックUIを 用いながら― 再生中情報のサポートや インタラクティブな解除などを 活用できます その場合でも 忘れてはいけないことがあります ステータスバーや ホームインジケータを― 処理しなければなりません 未処理のものを ビュー階層に通すと― AVKitがインタラクティブな解除や ズームのためのダブルタップを 処理します

iOSのAVPlayerViewControllerの 新しい点を見てきました 追加したのは これだけではありません iOS 12でパフォーマンスを 大幅に改善しましたが― iOS 13はさらに高性能です スクロールビューで AVPlayerViewControllerを使っても― 実にスムーズです AVPlayerViewControllerの ベストプラクティスについて見ましょう

デバイスで動画を見せるには ３つの方法があります iOSデバイスのAirPlayで動画を 再生する４番目の方法もあります 火曜の朝のセッションが すばらしかった まだ見ていない方は ぜひご覧ください 今日はオンデバイス再生に 焦点を当てます まずはフルスクリーン再生です UIKit的な意味でのフルスクリーンです UIWindowSceneの座標空間を カバーするということです 動画をフルスクリーンで再生する理由は ２つあるでしょう スプラッシュスクリーンでの バックグラウンド動画か― 動画が主役なので 再生をコントロールしたいかです スプラッシュスクリーンのほうから 考えてみましょう これらのものを アプリケーションに― 実装したいことでしょう そのために使うのが playerViewControllerです 子として埋め込むので ビュー階層の一番下にあります プレイバックコントロールを 無効にしたり― ビデオグラビティを設定して 動画をフルスクリーンにします 新しいアルファAPIを使って 動画を再生する場合― 背景を別の色に 設定するといいでしょう

次はAVFoundationです Apple TVで音楽を再生中に― スプラッシュスクリーンで他のものが 再生されるのは避けたいでしょう そこでAudioSessionを設定します AVAudioSessionの 最後のプロパティは― secondaryAudioShouldBe SilencedHintです 他のアプリケーションでオーディオを 再生していないかを知らせます そのアプリケーションの オーディオを優先させる場合― スプラッシュスクリーンで 再生中の動画は無音にします

次に動画が主役である フルスクリーン再生です この場合 プレイバックUIを 正しい向きに適応させたいですね このようなポートレート表示は― プレイバックトランスポート コントロールがスタックされてます ランドスケープでは レイアウトが変わりますが― 同じ機能性を 提供する必要があります AVPlayerViewControllerなら これが自動的にできます この２つのスクリーンショットで お気づきでしょうか ポートレートでは 動画はズームされていません ですがランドスケープでは ズームされています 画面全体を埋めるように ズームしているのは― 動画がデバイスでズームした時と 同様の画面比だからです しかしズームされていない動画を 好む人もいます この場合 デバイスの物理的な特性に― 動画を妨げられたくないでしょう AVKitはplayerViewControllerで それらに対処します 提供する機能を 全部 紹介する代わりに― iOS 13で追加した２つの 細かな点に注目してみましょう この動画をご覧ください ユーザが消音ボタンをタップします ミュートにすると オーディオが小さくなっていき― 音量スライダの アニメーションが表示されます (音楽) この場合は インタラクティブな解除で― オーディオがフェードしました 解除をキャンセルすると オーディオが復活します (音楽) 小さなことですが この２つで― AVPlayerViewControllerを 詳細に制御できることが分かります アプリケーションに取り入れれば ユーザは自動的に使えます

他にもいろいろあります どうやって これらを取り入れるのかは― コードで説明しましょう

先ほどのものと基本は同じですが― 外部メタデータが加わりました この１行がメタデータを補足します このように簡単に始められます UI側で処理することが これほど少ないのに― なぜ良いエクスペリエンスが 得られるのでしょうか ベストプラクティスについて話します AVPlayerViewControllerを使って フルスクリーンにすると― モーダルになります 他のビューコントローラの 子ビューコントローラとは違います 表示ステートを知るために やったこともあるでしょう 今は先ほど話した コールバックでできます モーダルな表示で ステータスバーの可視性を処理できます 表示モードも最適化できます ビデオグラビティや ズームモードも処理できます インタラクティブな解除もです モーダルに フルスクリーン表示する時― デフォルトのmodalPresentationStyleを 使います iOS 13では― デフォルトはautomaticです AVPlayerViewControllerは フルスクリーン表示になりました フルスクリーン表示には ２種類あります FullScreenと overFullScreenです デフォルトを使いましょう そうすればビューコントローラが 表示されている場合― UIKitで表示ビューを 削除できます 皆さんのビューは― 新たなビュー階層をカバーしています 表示ビューが削除できるので 回転にも適してます ビューが見えない時に レイアウトしたくありません さらにランドスケープ再生も可能です ただしAppやビュー階層が ポートレート表示だけの場合を除きます

ビデオグラビティプロパティを そのままにしておくと― 先ほど説明したようなことを 自動的に可能にします ビデオグラビティの設定で望みどおり ズームやズームの解除ができます 設定を変えると自動的な ビヘイビアは起こりませんが― ユーザは通常 自動的なほうを好みます 新しいデリゲートメソッドで フルスクリーンステートを追跡します

AVFoundationのベストプラクティスに 関するヒントです これは私の考えですが 動画を途中から再生する場合 再生開始時間をプレイヤーで 設定する前に― プレイヤーアイテムを そこまで進めます そしてすでに再生している 再生プレイヤーを― AVPlayerViewControllerに 提供します これでUIが正しく見えます 再生しないコンテンツを ローディングすることも避けられます 常にAVPlayerとAVPlayerItemの プロパティを監視しましょう その際はKVOを使います プロパティがfailになっても― 大抵 簡単に回復できます errorプロパティをチェックし mediaServicesWereResetなら― AVFoundationオブジェクトを 再構築します そしてplayerViewControllerに戻せば 問題は解決です

このプロパティで最適化された ビデオレンダリングが提供されます

AudioSessionを 再生のために設定しましょう

AVPlayerViewControllerを インラインに埋め込む場合― 考慮すべきことがあります フルスクリーン表示については すでに話しました iOS 13の新しいフルスクリーン表示の コールバックです 繰り返しませんが １つ言っておきます 以前のAVPlayerViewControllerでは 埋め込まれたインライン表示から フルスクリーン表示にする場合― modalTransitionStyleは overFullScreenでした 表示ビューは削除されません アプリケーションを iOS 13に対してリンクすると― デフォルトの表示スタイルは フルスクリーンとなります 表示ビューは 削除されるかもしれません これには先ほど説明したような 利点があります 理想はmodalPresentationStyleを fullScreenにすることです できなくても overFullScreenに設定できます しかしデフォルトを維持することを お勧めします

埋め込み型の表示の場合― 黒いバーが見えないように 動画をズームしたい場合もあります 他にも動画ビューポートに― コーナーカーブなどを 加えたいかもしれません ビューの背景色を 設定したいこともあります インラインに埋め込まれていれば AVPlayerViewControllerのビューや― ビデオグラビティにできます 表示のインライン部分に使います ユーザがフルスクリーンにするなら そこで正しく処理されます AVPlayerViewControllerで フルスクリーンにするなら― インライン部分のプロパティは 変えても大丈夫です 問題ありません

自動的なビヘイビアを提供する プロパティもあります インライン表示の場合です 例えばユーザが再生ボタンを押すと― playerViewControllerのコンテンツは 自動的にフルスクリーンになります そして動画が終わると フルスクリーンを終了します これらは 自動で処理されるのが一番です ユーザがスクラブ再生で 動画の最後に飛ぶとします 動画が終わりますが 動画を消すのは問題です どこから見ようかと 探しているだけかもしれません 我々はユーザの行動を追跡し 適切ならば終了します

UIViewControllerの containment APIを適用します こんな感じです

スクロールする動画が多くある場合― ポスター画像は名案だと 思うかもしれません 動画を全部ロードしなくても― 動画のフレームを 表すことができます でも時間がかかります AVPlayerViewControllerの contentOverlayViewを使いましょう 動画の最初のフレームが 準備できたら― 知りたいかもしれません オーバーレイビューのコンテンツを 削除するためです AVPlayerViewControllerの isReadyForDisplayを監視しましょう KVOで監視できるプロパティです このようになります 動画がすでに変換されてる 場合があるので 常に初期値を取ります

ピクチャ･イン･ピクチャは アプリケーションに簡単に追加できます AVPlayerViewControllerが ほぼすべてをやってくれます アプリケーションが サポートするように― Xcodeのチェックボックスを クリックするだけです

AVPictureInPictureControllerでも AVPlayerViewControllerでも ユーザがスワイプで iPadのホームに戻ると― ピクチャ･イン･ピクチャが 自動的に始まる場合があります アプリケーションが バックグラウンドにある時― 動画の再生を 止めないようにしましょう ピクチャ･イン･ピクチャが 始まっているかもしれません ユーザが見たい動画を 停止しないでください AVFoundationがこれを処理します どうしても動画を停止する時は バックグラウンドのステートを待ちます アプリケーションステートか ウィンドウシーンステートです これが方法です

ピクチャ･イン･ピクチャかどうか そのステートを追跡するため― AVPlayerViewControllerDelegateを 使います PictureInPicturePlaybackを トグルします

ピクチャ･イン･ピクチャが始まると ビューコントローラが消えます フルスクリーン表示の時とは異なり ピクチャ･イン･ピクチャの間は― AVPlayerViewControllerの 割り当てが解除されません ビューコントローラが消えたら― アプリケーションに 戻るためのUIを回復したいですね 簡単にできます AVPlayerViewControllerDelegateで 得られるコールバックです UIを希望するステートに戻すだけです ここでは ビューコントローラを再表示します コールバックに渡された 完了ハンドラを呼び出します 準備ができたら知らせてください 元に戻します 急がないと― ピクチャ･イン･ピクチャ ウィンドウが消えます ユーザは ピクチャ･イン･ピクチャが使えず― アプリケーションに戻れません

以上がiOSのAVPlayerViewControllerの ベストプラクティスでした ウェブサイトに サンプルコードがあります ではダン･ライトにバトンタッチします (拍手) ではTVでの 動画再生について説明します

tvOSでは AVPlayerViewControllerが― インタラクティブな フルスクリーン再生をサポートします ナビゲーションや情報 設定などの 標準的なコントロールがあります Siriのwhat did she say?機能も 組み込まれています 再生中情報の発行や インタースティシャル広告― コンテンツの提案などもあります

tvOS 13の新機能を紹介します

昨年 コントロールのアピアランスを 更新しました またtvOS 12.3で スクラブ調整を始めました 本日 紹介するのはカスタム インタラクティブオーバーレイ ライブストリームのチャンネル切り替え ペアレンタルコントロールの 自動強制です

スクラブ調整により Siri Remoteを使うと― 探しているポイントを 見つけやすくなりました

playerViewControllerの スクラブ調整は― 広範囲の動画の中を素早く ナビゲートするのを助けます スクラブ調整によって ナビゲートを始めて数秒で― 目当てのポイントへ到達できます 情報ビューのアピアランスも 新しくなりました

カスタム インタラクティブオーバーレイは― アプリケーションコントロールを サポートします カスタムオーバーレイは 普段は隠されています 画面のヒントがユーザを導き― スワイプアップで オーバーレイを表示させます

オーバーレイは ボタンやコレクションなどの― インタラクティブ要素があります これはビューコントローラで 定義します

チャンネルロゴのような 非インタラクティブな永続要素には― contentOverlayViewを 使い続けます

カスタムオーバーレイを見てみましょう

動画が始まると画面下にヒントが出ます スワイプアップで オーバーレイが表示されます スワイプダウンか メニューボタンのクリックで隠せます

ビューコントローラが表示されます そしてUIViewControllerの 通知を得ます 解除とアニメーションを処理します ユーザはアプリケーション全体で 一貫したエクスペリエンスを得られます 表示したいコンテンツの ビューコントローラを定義し― customOverlayViewControllerを設定

次にライブ中継の チャンネル切り替え

複数のライブストリーム間で チャンネル切り替えをサポートします 例えば異なるチャンネルです

水平方向のスワイプで 次か前のチャンネルに移れます

インタースティシャル画面が ロード中にチャンネルを説明します

チャンネル切り替えを見てみましょう

スワイプするとインタースティシャル ビューが表示されます 緑色の背景にテキスト ロード中のインジケータです これは自分でコントロールできます 写真や背景色のグラデーション カスタムスピナーまで自由です

ユーザに現在地点と行き先を 示すのが目的です

これは非インタラクティブな画面です 次のチャンネルに導くものなので コントロールはできません

チャンネル切り替えのために― AVPlayerViewControllerDelegateを 拡張します playerViewControllerに skipToNextChannelと― skipToPreviousChannelを実装 これらのメソッドで― プレイヤービューコントローラの コンテンツを切り替えます

コンテンツの再生準備が整うまで 待つこともできます 終わったら completionブロックを呼び出し― 成功したらtrue 失敗したらfalseを completionブロックは 必ず呼び出しましょう それがインタースティシャルを 解除するからです

nextChannelInterstitial ViewControllerと― previousChannelInterstitial ViewController これらの新しいメソッドが― チャンネルの切り替えを つかさどります 必要に応じてビューコントローラを インスタンス化し― 新しいチャンネルの情報を入れます それを返します この例では新しいビューコントローラを 毎回 インスタンス化してますが― 一度すれば 再利用できることが多いです

tvOSではパスコードや デバイスプロファイルを使い― コンテンツへのアクセスを 制御することができます デバイスプロファイルは 教室やビジネス環境で使われます

tvOS 13ではAVKitにより― 制限されたコンテンツをユーザが 再びコントロールできるようにします

コンテンツ制限をテストするために 制限の設定を―

オンにします パスコードを入れて承認します

そして映画やテレビの コンテンツレーティングを変更します ここではPG-13にします

アプリケーションで サポートするにはどうするか コンテンツのレーティングを 設定しましょう

アセットに情報がなければ追加します AVPlayerItemの externalMetadataプロパティを使います iTunesMetadataContentRating 識別子も使います

再生開始時点でレーティングを 提供すればAVKitがテストして― ユーザ設定で制限された コンテンツか判定します 必要ならパスコード画面を表示します

パスコードで制限されてる場合 その入力を促されます

しかしデバイスプロファイルで 制限されていたら再生されません ユーザが オーバーライドできないのです 再生が始まると AVPlayerViewControllerが― コンテンツへのアクセスを リクエストします もっと早くするには― requestPlaybackRestrictions Authorization APIを使います

ユーザがパスコードを知らない 入力したくない場合や デバイスプロファイルで 禁止されてる場合は― プレイヤービューコントローラは 自動的に解除されます

最後に カスタムプレイバックUIであれば― 前述のAPIでコンテンツへの アクセスをリクエストできます

制限されたコンテンツを 再生してみましょう

再生の準備ができて メタデータが入手可能になると― 直ちにパスコード画面が現れます パスコードを入れると― パスコード画面が消えて 動画が再生されます

メディアコンテンツレーティングの 提供方法を見てみましょう このメタデータは アセットにないことが多いです AVPlayerItemのexternalMetadata プロパティを使いましょう

すでに見たコードです ヘルパー機能が文字列の形で レーティングを受け取り― AVMetadataItemに返します 値はその文字列で― extendedLanguageTagは 不定を示すundに設定されます 特定の言語ではないからです 識別子は iTunesMetadataContentRatingです これでPG-13のレーティングが 作成されました

これをexternalMetadata プロパティに追加します AVPlayerViewControllerは 必要なら自動でプロンプトします プレイヤービューコントローラを 表示する前やコンテンツの前など 早くにプロンプトしたい場合は―

requestPlaybackRestrictions Authorization APIを使います

リクエストが完了すると クロージャが呼び出され― リクエストが成功したか 失敗したか示します 失敗したらerrorに原因が示されます 成功したら再生に移ります

キャンセルして メニュー画面に戻ることもできます ユーザのリクエストがない限り 再生の繰り返しはやめましょう

それでは実演してみましょう

サンプルアプリケーションです

HLSでテストした経験があれば 見覚えがあるでしょう

画面下に スワイプアップのヒントが出ます

スワイプアップで カスタムオーバーレイが現れました すべてがうまく動いています スワイプダウンで隠せます 他も見ましょう

指で押さえて下に滑らせると 画面の左右にヒントが現れます チャンネル切り替えに導く矢印です スワイプして 隣の会場の様子を見ましょう 使うのは…

一番下はレイアウトのリストです

先月の… 他には何があるかな

これは何でしょう (笑い声) どうも (拍手)

サンプルアプリケーションです

いいですね　戻りましょう

戻ります 画面下に スワイプアップのヒントが出ます

スワイプアップで カスタムオーバーレイが現れました 静止します (笑い声)

tvOSでのベストプラクティスについて 見てみましょう スワイプアップで現れるコントロールは すでにあるでしょう Up Nextリストであることが多いです

通常はカスタムスワイプアップ ジェスチャ認識を― プレイヤービューか スーパービューにインストール そしてビューコントローラを表示します しかしこれからは カスタムオーバーレイを使いましょう そのほうが将来的に より良い互換性を得られます より一貫したエクスペリエンスを ユーザに提供できます

UITapGestureRecognizerで― プレイヤービューコントローラの 解除を検知している人もいるでしょう 解除アニメーションを 提供しているかもしれません 代わりに解除通知のデリゲートを 使いましょう tvOS 11で導入したもので 必要な情報をすべて提供してくれます ユーザがメニューボタンを押して― プレイヤービューコントローラを 消すのとは違います 自動で消えるのです

showsPlaybackControlsを乱用して― コントロールの可視性を すぐ変えるのはやめましょう showsPlaybackControlsは プレイバックコントロールへの― アクセスを ユーザに許可するか決めるものです

メディアコンテンツ レーティングを提供し―

ペアレンタルコントロールも テストします 問題は少ないでしょうが― パスコード画面が現れ うまくいかないことがあります 再生開始時点で ヒントを数秒表示する際に― パスコード画面で隠れてしまったら ユーザに見えません

まとめです AVPlayerViewControllerを プラットフォーム全体に導入しましょう iOSとtvOSに低コストで 高い機能性を追加できます リモートや他の機能で 広い互換性があります

AVPlayerViewControllerDelegate通知で iOSのように表示ステートを追跡し― tvOSのように解除を処理します

プレイヤーアイテムを監視し エラーを処理します

iOSでもtvOSでも externalMetadataを使えます ペアレンタルコントロールや 情報パネルに加え― externalMetadataは 再生中情報の発行にも使われます externalMetadataを 両方のプラットフォームで使うと― 再生中情報をすべて削除できます

スワイプアップで表示する オーバーレイから― カスタムオーバーレイに 移行しましょう ペアレンタルコントロールも サポートします

サンプルコードを含む より詳しい情報は― ホームページを ご確認ください 質問事項とコードを持参で― ぜひ２時からのAVKitラボや ４時からのAVFoundationラボへ

ありがとうございました (拍手)