すばらしい空間再生体験の構築

♪ ♪ ♪ こんにちは Jeremyです Media Experienceの ソフトウェアエンジニアです このトークでは アプリの動画再生で すばらしい 空間体験を創り出す方法を説明します すばらしい体験とは プラットフォームに最適化され 強力なメディア機能を利用し システム全体が 統合されているという意味です まず シンプルなアプリでの メディア体験について確認し 次に より高度なUI機能について お話します そのあと動画を表示するための その他の方法を紹介し 最後にそれぞれのオプションを比較します iOSまたはtvOSのメディアAPIを 使用したことがあるなら これに精通しているかもしれません このプラットフォームは 同じAPIを使って構築されており それと同時に独自の機能性のための 拡張が加えられています AVFoundationは ストリーミング パース デコーディング 同期と 動画再生における すべての作業を処理します AVKitはAVFoundation UIフレームワークに構築され 各プラットフォームに対して カスタマイズされ 統合された再生体験を創出します このプラットフォームでは AVFoundationが強化され 3D動画などの独自の機能を利用する 新しいメディアフォーマットが サポートされるようになりました これらのフォーマットの詳細については こちらの動画を参照してください また AVFoundationは 周囲の世界に合わせて 動画をシームレスに合成し 音声もそれに合わせて反応するように RelityKitを使用して 高性能で高品質のレンダリングを 行うように強化されました AVKitの AVPlayerViewControllerは より洗練された体験を作成するために RealityKitの力と プラットフォームの独自の機能を 活用するように拡張されました これには当然ながら 再生コントロールが含まれますが 他にもさまざまな独自の機能があります アプリでこれを活用するための要件は ます このプラットフォームのSDKで Xcodeのターゲットがビルドされること iOS SDKでビルドされた 互換性のあるiOSアプリの場合は iOS相当の体験となります iOSまたはtvOSで行うように AVPlayerViewControllerを使用します そしてウインドウに表示される ビューコントローラを提示します コードを使って実演してみましょう まず AVFoundationとAVKitを インポートします 次に AVPlayerViewControllerを 作成して AVPlayerに接続します content URLで 新しいプレイヤーアイテムを作成し プレイヤーに設定します プレイヤーを設定した後に アイテムを ビューコントローラに追加すると パフォーマンスが向上します なぜならプレイヤーは メディアが読み込まれる前に どのように表示されるかを理解するからです これをSwiftUIで使用するには そのコードを UIViewController Representableにラップします これをPlayerViewと呼ぶことにします 次にアプリを作成します これをMoviePlayingAppと 呼ぶことにします ウインドウに表示されるように 定義したばかりの ビューコントローラを追加します これだけで動画の再生アプリができました このコードが 他のAppleプラットフォームに 書くコードと似ていると 思うかもしれませんが そのとおりです AVPlayerViewControllerと AVPlayerは 皆さんに代わって 多くの重労働を行います このようなシンプルなアプリでの メディア体験をお見せしましょう アプリが起動する前は この部屋のみが表示されます アプリが起動すると 目の前に大画面が現れ 部屋が暗くなり いい雰囲気を醸しだします 移動しても画面は固定されており オーディオも画面にアンカーされたままです 再生コントロールを表示するには 画面を見てタップします コントロールは動画のすぐ前に 表示されます 再生中 何もしなければ自動的に非表示になります 手動で非表示にする場合は 画面を見てもう一度タップします 画面の下のウインドウバーをつかむと 位置を変えることができます

画面の角をつかむとサイズを調整できます 画面のサイズを変更すると スムーズに動き 動画のアスペクト比に 調整されます Digital Crownで音量を調整するか 次のようにDigital Crownで 環境を開くことができます 私はこういう風に動画を見るのが好きです ご自身でもご体験ください

では再生コントロールが提供する機能を より詳しく見てみましょう これはプレイヤーインターフェイスです 右上には音量調整があり 音量をすばやく調整するか ミュートにできます 先述のようにDigital Crownで 音量調整することもできます 左下にはおなじみの再生/停止 巻き戻し/早送りボタンがあります 下中央にはスクラバーがあり 動画の異なる場面に飛ぶことができます 右下の このボタンには その他のオプションがあります こちらは再生速度を調整するための オプションです 動画に複数のオーディオトラックや キャプショントラックがある場合 このオプションを使用して オーディオトラックの 言語を選択するか お好みの言語のキャプションを選択します 最後のオプションは調光効果です 私は動画に集中するために 暗くして観るのが好きですが 動画以外にも 注意を払いたい場合もあります ここでは調光効果をオフにして 周りの状況を把握しやすくします ビルトインの 基本的な機能を説明したところで より高度な機能について紹介します サムネイルのスクラブは スクラブ中の 動画の小さな画像を表示し コンテンツのシームレスな移動を 可能にします コントロールは トリック再生のトラックとしても知られる I-frameのみのプレイリストを使用する HLSストリームがスクラブされた際に サムネイルを自動的に表示します 幅が145ピクセルの 小さなトリック再生トラックが 推奨されます 詳細についてはこちらのドキュメントを 参照してください ロゴ 要約 広告向けに メディアをタイムラインに 挿入する必要がある場合もあります インタースティシャルはこの機能を サポートします インタースティシャルが提示されると コントロールが タイムラインのインジケータに 自動的に反映させます これらのインタースティシャルは AVPlayerInterstitalEventControllerを 使ってプログラム的に構成できます またはHLSストリーム内で 提示することもできます 詳細については こちらのセッションを参照してください 動画再生アプリで一般的に使用される 追加のUIオプションがあります コンテキストアクションでは イントロをスキップや 次のエピソードを再生の ボタンを追加できます タイトルとオプションの画像を 追加することもできます カスタムインフォビューコントローラは コンテンツに関する メタデータの表示や 関連コンテンツの推奨に使用できます これらのAPIは他のAppleプラットフォームと 同様に機能します 詳細については こちらのセッションを参照してください Immersive Spaceという機能を 使用すると 別の場所に移動することもできます アプリがImmersive Spaceを作成すると その空間の見た目を自分で決めることができ さらにすばらしいことに 動画画面は 自動的にその空間に移動し 予測可能なサイズと位置で画面を固定し 毎回優れた視聴角度を保証します またコントロールが切り離され 近くに移動するので 操作も簡単になります コードを見てみましょう これは先程のMoviePlayingAppです まず Immersive Spaceを追加します 3Dコンテンツは RealityKitエンティティによって 表現されます 次にPlayerViewで onAppearを使用して スペースを開けます プレイヤーがドッキングされているときに Immersive Spaceが対応するよう デザインされていることを確実にしましょう 空間を構築し提示する方法の 詳細については こちらのセッションを参照してください AVPlayerViewControllerは このプラットフォームで すばらしい体験を提供できるよう 入念にデザインされました AVPlayerViewControllerが みなさんのアプリでも 機能することを願っています ですので おすすめの機能や動作があれば 私たちがみなさんのユースケースを 改善できるよう フィードバックを送信してください カスタム再生コントロールを 構築する必要があることが稀にあります その場合もフィードバックを 提供してください AVPlayerViewControllerの 使用をおすすめします これにより コントロールを非表示にし カスタムUIのオーバーレイを 提供できるようになります ローレベルのAPIを使用するよりも こちらをおすすめします なぜなら先程お見せしたように AVPlayerViewControllerは 再生コントロール以外にも さまざまなシステム統合機能を 提供するからです 今後もすばらしいシステム統合機能を 得ることができます AVPlayerViewControllerの フル画面体験について掘り下げました 次は 動画再生のその他の ユースケースを見てみましょう 時にはドキュメントの一部にしたり プレビューを再生したりするために 動画をウインドウに埋め込んで 再生したい場合もあります インラインのAVPlayerViewControllerは このような状況でも役に立ちます インラインビューを取得する方法は？ ウインドウを埋めずに表示される場合は 自動的にこのモードが使用されます インラインコントロールも OS向けに再設計されています 動画はAVPlayerLayerを使用して ウインドウ内で合成されるため 3D動画を表示することはできないことに ご留意ください アプリがスプラッシュ画面や ビデオトランジションなど 動画を3Dシーンのエンティティとして 再生したい場合もあります その場合は再生コントロールや ドッキングなどのシステム統合は 使用したくありません このような場合は RealityKitの VideoPlayerComponentを使用します VideoPlayerComponentは RealityKitエンティティを AVPlayerに接続します その他のエンティティと同じように RealityKitシーンに 配置することができます 動画のアスペクト比の 正確なメッシュを作成し キャプションの表示をサポートします 可能な限り AVPlayerLayerではなく こちらを使用することをおすすめします なぜならこれは 動画のRealityKitの最適化を 利用するので AVPlayerLayerよりも 性能が優れているからです また新しい3D動画フォーマットにも 対応します 詳細については こちらのセッションを参照してください 動画がエフェクトとして使用される場合に 3Dシーンで 動画を使用したい場合もあります その場合は独自のジオメトリを作成し 動画が表示される方法を 管理することができます VideoMaterialはローレベルのAPIで 任意のジオメトリで動画を表示します これは元のアスペクト比を 使用することはできず キャプションを表示する 能力もないという意味です 詳細については 関連のトークをご確認ください 追加のUI機能と その他のユースケースについて 説明しました DestinationVideoサンプルアプリは それらの機能を実証します 動画の選択用の動画ブラウザがあり Immersive Spaceで動画を再生します こちらです 情報ページを表示する 動画を選択します するとImmersive Spaceが開きます プレビューにはカスタムUIコントロールの インラインプレイヤーが使用されています 動画を再生します プレイヤーUIが表示され 最良の視聴体験向けに 固定されたサイズと場所で ドッキングされます また画面がこのようにImmersive Spaceに ドッキングされた場合 再生コントロールは切り離され より近くに表示されるので 操作しやすくなるのも すばらしい部分です リストボタンをタップすると 動画の視聴中 アプリによりカスタム インフォビューコントローラが提供され コンテンツの詳細を表示したり 関連コンテンツを確認できます 動画が終了する間際には 「次を再生」という 関連のアクションボタンが 右下隅に表示されます 動画再生の空間体験についてお話しました 画面が目の前の空間に浮き すばらしいビジュアルと 空間オーディオを提供してくれます 必要な再生コントロールが すべて含まれており その他の再生ユースケースについても 少し説明しました アプリで動画を表示する方法は いくつかあります それらを比較してみましょう これはビデオを表示するためのAPIです それぞれの異なる機能があります 必要なメディア体験に対して 適切なAPIを使用しましょう メディアが正確に表示され アクセス可能になるようにしてください プラットフォームに対し最適化し RealityKitでレンダリングして 3D動画フォーマットを有効にしてください また 強力な再生コントロールを プラットフォームで 使用可能にしましょう すばらしい体験を提供できるよう システム全体で これを統合してください AVPlayerViewControllerはアプリが 他のAppleプラットフォームで 使用する機能や このプラットフォームの 新しい独自の機能をフルに 活用することを可能にします ユーザーにすばらしい動画再生体験を 提供することができます 空間メディア機能は ユーザーが完全に新しい方法で 動画を体験する機会を提供します DestinationVideo サンプルプロジェクトをご確認ください ここで説明した多くの機能の デモを見ることができます これらの関連のトークもお見逃しなく みなさんが これらの 強力なツールを使って作成した アプリを見るのが楽しみです それまで私は映画でも見ておきます ではまた！ ♪