ストリーミングはほとんどのブラウザと
Developerアプリで視聴できます。
-
visionOSにおけるマルチビュービデオ再生の詳細
Apple Vision Proで複数のビデオの再生を可能にする、AVExperienceControllerの仕組みを解説します。導入の際のベストプラクティスに加え、異なる角度からのスポーツ映像配信や複数の試合の同時視聴などの高価値なユースケースについて確認しましょう。さらに、アプリ内での魅力的で直感的なマルチビュー体験をデザインする方法もご紹介します。
関連する章
- 0:00 - Introduction
- 1:55 - Introducing multiview
- 4:59 - Design a multiview experience
リソース
関連ビデオ
WWDC23
-
ダウンロード
こんにちは Ericです Media Experienceソフトウェアエンジニア を務めています 本セッションでは 新しく公開された マルチビューアーキテクチャを使用して アプリにビデオの同時視聴機能を導入する 方法を説明します
まず visionOSでのイマーシブな メディア視聴体験の構成要素を確認しましょう 空間オーディオや3Dビデオ そして大画面などがあり イマーシブな環境によって支えられています これらは visionOSシステムが提供する 驚異的な体験の一部にすぎません
これらを含む多彩な機能の実現には パワフルなフレームワークが不可欠であり そのフレームワーク自体も 継続的に改善されています AVFoundationは 2Dおよび3Dコンテンツを 含む動画の再生に必要な すべての処理を実行します visionOSでは AVFoundationはRealityKitと連携して 高品質なビデオと空間オーディオを 効率的にレンダリングします AVKitは AVFoundationとRealityKit およびUIフレームワークと プラットフォーム固有の機能を活用して プラットフォームに最適化された ビデオ再生体験を実現します AVKit 特に AVPlayerViewControllerは 使い慣れたユーザーインターフェイスと 多くのシステム機能との統合を提供し ビデオ再生機能を継続的に強化しています visionOSで AVPlayerViewControllerを使用することで 独自性の高い様々な機能を利用できますが その一つがマルチビューです まず マルチビューの概要を説明し visionOSで複数のビデオ画面を 同時視聴するのに最適な方法をご紹介します
次に マルチビューの基本概念を確認し それらの概念を基に 優れたマルチビュー体験を 構築する方法を解説します
複数の動画配信サービスを 同時に観たい場合や 目の離せないスポーツの試合が 2つ同時に行われている場合があります または視聴しているコンテンツに 複数のカメラアングルがあり 多様な視点で 視聴を楽しみたい場合もあります
こうしたユースケースなどに対して AVKitはマルチビューを提供します マルチビューは システムに統合された視聴体験であり アプリケーションに応じた カスタマイズも可能です マルチビューがもたらす可能性を 見てみましょう
大画面でコンテンツを視聴していますが これが簡単に実現できるのは AVPlayerViewControllerのおかげです ご覧の通り 画面左上に 新しいマルチビューボタンがあります このボタンが表示される場合 おすすめの関連コンテンツがあるということです マルチビューボタンをタップすると アプリが提供するコンテンツブラウザが開き スクロールして 視聴可能なコンテンツを確認できます
これがよさそうですね
マルチビューで 2つの画面を 並べて視聴できるようになりました 2つの画面には 光の効果が 適用されています 単一画面の再生での機能を活用した 優れたエフェクトです オリジナルのビデオが メインとしてフォーカスされており わずかに画像が強調され 音声も再生されます コンテンツブラウザを閉じると おなじみのメディア再生コントロールが表示され メインのビデオを コントロールで操作できるようになります 一時停止 スクラブ 音量などの設定の調整ができます もう一方のビデオをタップすると メインフォーカスと音声が切り替わります
一部の設定は全体に適用されます 例えば音量は フォーカスするビデオを 切り変えてもそのままです 再生速度などの設定は それを適用したビデオにのみ影響します
さらにコンテンツを追加できます 再生コントロールにある マルチビューボタンをタップして コンテンツブラウザに戻ります ビデオを追加する過程と ブラウザが選択内容にどのように反応するか 注目してください マルチビューでは 一度に最大5つの ビデオ画面を表示でき 快適さと視認性を最大化する レイアウトテンプレートが用意されています
ビデオを削除するには 各画面の閉じるボタンをタップするか ブラウザを使用して削除できます レイアウトを変更したい時は ビデオをドラッグすると テンプレート内でどこに配置されるかを 示すように反応します このビデオを中心に配置しましょう すべてをまとめると ビデオの追加や削除 配置の変更 再配置 サイズ変更もできるので 思い通りの視聴体験が得られます
単一のビデオ表示に戻るのも簡単です ここで説明したすべての動作や機能 例えば 光の投影や再生コントロール そしてサイズ変更は 従来と同じ 使い慣れた方法で使用できます マルチビューにより 視聴体験が大幅に強化されましたが すべてを直感的かつ使い慣れたものに 保っています マルチビューは 高度にカスタマイズ可能な機能です 魅力的で直感的なマルチビュー体験を デザインする方法をご紹介します
まず マルチビューに関する いくつかの主要な概念について説明します これらの概念に基づき マルチビュー対応の アプリの要素をコーディングします
最後に マルチビューをアプリに追加する際の ベストプラクティスを確認します
マルチビュー体験に表示される すべてのビデオ画面は それぞれ個別に AVPlayerViewControllerによって サポートされています PlayerViewControllerが マルチビューに追加されると 画面は 視聴の快適さと 人間工学を最大化する方法で 配置されます
単一のAVPlayerViewControllerを 詳しく見てみましょう これに対応する新しい要素は AVExperienceControllerです このコントローラーは 親であるPlayerViewControllerで 切り替えを行う際の選択肢となる 一連のビデオ再生体験を定義します 体験の例は ビデオが他のアプリコンテンツと 一緒に表示されるembeddedか この図のように ビデオが単独で表示される expandedのいずれかです 各AVExperienceControllerは 独自の 許可された体験のセットを指定できます 許可された体験としてマルチビューを追加すると マルチビューボタンが 対応するPlayerViewControllerの UIに表示されます マルチビューボタンをタップすると ExperienceControllerが マルチビュー体験へと移行します この時点で コンテンツ選択ブラウザが表示され マルチビュー体験が 開始されたことが示されます
このビューはカスタマイズ可能です 視聴可能なコンテンツの管理と コンテンツ操作用のUIの提供のために コンテンツブラウザビューコントローラーを 提供します このビューコントローラーを AVMultiViewManagerにアタッチします AVMultiViewManagerは 各種の細かい処理を行います 例えば コンテンツブラウザを 必要に応じて使えるようにします また ExperienceControllerが マルチビューに移行したのかを追跡し ビデオ画面のレイアウトを維持します 基本的に ブラウザビューコントローラーと AVMultiViewManagerは連携して動作し 実行中のマルチビュー体験において コンテンツを追加および削除します 例えば ユーザーがブラウザのUIを通じて 追加するコンテンツを選択すると ブラウザビューコントローラーにシグナルを送り そのコンテンツを再生するための 別のAVPlayerViewControllerを 作成します ExperienceControllerを使って 実行中のマルチビュー体験に移行します AVMultiViewManagerは マルチビューに入る一連の ExperienceControllerを追跡し それに応じて ビデオ画面のレイアウトを更新します この仕組みをコードで見てみましょう まず カスタムの ブラウザビューコントローラーを定義し その主要な役割を設定します この役割とは マルチビューで視聴可能なコンテンツの管理と コンテンツ選択のためのUIの提供です これを AVMultiViewManagerに配置します 早期に設定すれば いつでも MultiViewManagerがブラウザUIを 起動できるようになります
ユーザーがブラウザで コンテンツを選択した時に それをマルチビューに追加するのは簡単です 新しいAVPlayerViewControllerを作成し 選択したコンテンツを再生するよう設定します AVExperienceControllerにアクセスし 許可された体験にマルチビューを追加します この時 AVPlayerViewControllerは 作成されていますが そのビューはまだビューの階層内にありません この時点では ExperienceControllerは プラットフォームのデフォルト体験に 設定されています これをマルチビューにするには ExperienceControllerを移行させます MultiViewManagerが その後の処理を引き継ぎます
ユーザーがブラウザを通じてコンテンツを 削除した場合も パターンは同様です この場合 コンテンツのExperienceControllerは すでにマルチビューにあるので 別の許可された体験に移行させます この例ではembeddedを使用しています 対応するAVPlayerViewControllerが ビュー階層内にインストールされていない場合 MultiViewManagerは単に コンテンツを非表示にします
コンテンツブラウザは マルチビューのコンテンツを 追加および削除する主な方法ですが 唯一の方法というわけではありません アプリは コンテンツブラウザの外部から 開始されたイベントを AVExperienceControllerの デリゲートで処理します デリゲートを使用して 移行の変化に応答します デリゲートは トランジションイベントを その発生方法を問わず受け取ります 受け取る情報には それぞれの進捗に関する コンテキストが含まれます 例えば 単一画面の AVPlayerViewControllerの マルチビューボタンがタップされた場合 対応するExperienceControllerは マルチビューに移行します デリゲートは通知を受け取り アプリはマルチビューの開始に応答します
別の例として ビデオ画面のいずれかをタップして マルチビューコンテンツを削除する場合や 再生コントロールからマルチビューを 完全に終了する場合があります デリゲートは これらのトランジションイベントを受け取り アプリの状態と MultiViewManagerの 動作の間の一貫性を維持します
また デリゲートには トランジションの開始前に 追加のタスクを完了するオプションも あります これにより アプリは状態の準備や 関連するUIの表示／非表示の切り替えや スムーズなトランジションのための 一般的な準備を実行できます
マルチビュー体験の実装方法については ドキュメントで詳細をご確認ください アプリでマルチビューを使用する際の ベストプラクティスを確認しましょう マルチビューを機能として使用する際は 慎重な検討が必要です。 複数の画面が同時に表示されると 多くのことが行われることになり それを予期していないユーザーは 圧倒されるかもしれません スムーズな移行のサポートが 快適な マルチビュー体験を実現する鍵となります 特に 一度に視聴するビデオの数を ユーザーが決められるようにするのが重要です 最初は 誰もが通常行っている 単一画面での視聴から始めましょう マルチビュー体験を望むユーザーには AVPlayerViewControllerが提供する 標準ボタンの使用を提案してください そのユーザーは マルチビューを利用してみた後でも 単一画面の方を好むかもしれません その場合も 同様に優れた体験を提供しましょう
コンテンツについては ユースケースを考慮しましょう マルチビューは複数のコンテンツを 同時視聴する場合に理想的で 1つのコンテンツに主な重点をおく場合に 特に有効です TV番組のエピソードを連続して 視聴するなどには向いていません そのような場合は AVQueuePlayerを検討してください 一般に マルチビューを使用する 必然性が高くない場合 ニーズに応じた最適な体験を提供する 他のAVKitオプションを検討しましょう
次は コンテンツの ブラウジングに関してです コンテンツブラウザは コンテンツを 追加／削除するための主要な手段です 魅力的なデザインも重要ですが 何より直感的であるべきです ユーザーが何を期待できるのかを理解し 見たいものをすぐ視聴できるようにします
直感的なコンテンツブラウザは 情報を明確に伝達し ユーザーの選択にスムーズに反応するため 複数のビデオ画面の操作を促進します 各コンテンツを タイトルとサムネールプレビューで 簡潔に説明してください ブラウザのスペースは ビデオ画面全体に対し限られているので 装飾は最小限に抑え 内容の識別に役立つ 要素に焦点を当てましょう
ブラウザ全体を他の体験に調和するように スタイリングしましょう 例えば サムネールのアスペクト比が 再生時の比率と一致するようにしてください また 必要に応じてアクセントカラーを マッチさせましょう ブラウザや選択肢が強調されすぎると 全体的な視聴体験を低下させるだけです
現在の選択項目が目立つように 強調表示しましょう 視聴可能なコンテンツのごく一部しか ユーザーに見えないこともあるので どのコンテンツを画面に表示中なのか ブラウザで識別しやすいようにします ただし ブラウザであまりに頻繁に コンテンツを並べ替えたり 限られたスペースに 詰め込みすぎたりすると ユーザーの操作や選択が やりにくくなる可能性があります イマーシブなメディア体験が核となる アプリを開発している方は AVKitが提供するものを確認することを 強くおすすめします AVKitは 豊富なメディア再生機能のセットを 継続的に改善しています マルチビューはAVKitを活用することで アプリの体験を向上させ さらに まったく新しい可能性をもたらす 素晴らしいユースケースです そして マルチビューはパワフルです AVKitのその他の側面と同様に スムーズな再生のための最適化 プラットフォーム全体で親しみやすく 直感的な視聴体験を 提供するためのコミットメント そして アプリのニーズに応じた カスタマイズ性の組み合わせがあります 皆さんがマルチビューで どんな体験を構築するか楽しみです ご視聴ありがとうございました
-
-
7:47 - Supply a custom browser view controller
import AVKit AVMultiViewManager .default .contentSelectionViewController = multiViewController() -
8:09 - Add content to multiview
import AVKit let controller = AVPlayerViewController() let experienceController = controller.experienceController experienceController.allowedExperiences = .recommended(including: [.multiView]) await experienceController.transition(to: .multiView) -
8:47 - Remove content from multiview
import AVKit let experienceController = … await experienceController.transition(to: .embedded)
-
-
特定のトピックをお探しの場合は、上にトピックを入力すると、関連するトピックにすばやく移動できます。
クエリの送信中にエラーが発生しました。インターネット接続を確認して、もう一度お試しください。