キャスト メディア ブラウズ(CMB)は、スマート ディスプレイ ユーザーが音声や動画のコンテンツ カタログを見つけて操作できるようにする機能です。CMB は、スマートディスプレイ用に特別に調整された効率的なブラウジング体験でウェブレシーバーを拡張します。
CMB は、スマート ディスプレイ UI の規則に沿った一貫したブラウジング エクスペリエンスを提供する標準化されたテンプレートを定義しています。デベロッパーは、これらの標準化されたテンプレートにデータを提供して入力します。テンプレートでは、音声と動画のコンテンツの両方、または両方を組み合わせることができます。
エントリ ポイント
CMB のエントリ ポイントは 2 つあります。ユーザーはここから、タップ操作または音声操作でコンテンツをブラウジングして選択できます。
プレーヤー ブラウジング
再生中に上にスワイプすると、アプリで提供されるコンテンツの一覧が表示されます。
動画
音声
ランディング ページの閲覧
cast-media-player
要素を含むウェブ レシーバーがスマートディスプレイで実行されているときは、IDLE 状態で CMB が表示されます。
動画とオーディオ
コンテンツを入力しています
デベロッパーは、各エントリ ポイントのテンプレートに各コンテンツ アイテムのデータを入力する必要があります。プレーヤー ブラウズの入力に使用されるコンテンツと、ランディング ページの閲覧を設定するために使用されるコンテンツが異なる場合があります。
プレーヤー ブラウズを使用して、ユーザーが現在再生しているコンテンツまたはプレイリストのアイテムに関連するアイテムを表示する。ライブテレビ プロバイダは、このエントリ ポイントを使用して、チャンネルのリストに簡単にアクセスし、簡単にアクセスできるようにすることもできます。
ランディング ページ閲覧を使用して、新しいオリジナル コンテンツ、現在公開されているコンテンツ、またはユーザーがさらに興味を持ちそうなコンテンツに対する認知度を高めます。
メディア ブラウズを有効にする
setBrowseContent
を呼び出して、ブラウジング対象のメディア コンテンツのリストを提供します。
const controls = cast.framework.ui.Controls.getInstance(); controls.setBrowseContent(BrowseContent);
このメソッドを呼び出すと、すぐにメディア ブラウズ UI が更新されます。
セーフエリアの高さ
CMB が有効になっている場合、Cast SDK UI のセーフエリアの高さが変化するため、場合によっては既存の Web Receiver UI を更新する必要があります。getSafeAreaHeight
を使用してセーフエリアの高さを決定します。
// Media Browse UI enabled controls.setBrowseContent(BrowseContent); console.log(controls.getSafeAreaHeight()); // 338px on Google Nest Hub // Media Browse UI disabled controls.setBrowseContent(null); console.log(controls.getSafeAreaHeight()); // 408px on Google Nest Hub
メディア ブラウズを削除
メディア ブラウズ UI を削除するには、setBrowseContent
で null
を使用します。
controls.setBrowseContent(null);
メディア ブラウジングをカスタマイズする
コンテンツの閲覧
BrowseContent
を使用してメディア ブラウズ UI のタイトルをカスタマイズし、アイテムを更新します。
BrowseItem
を使用して、メディア ブラウズ UI で各アイテムのタイトル、サブタイトル、再生時間、画像を表示します。
アスペクト比
targetAspectRatio
を使用して、画像アセットに最適なアスペクト比を選択します。Web Receiver SDK では、3 つのアスペクト比がサポートされています。
アスペクト比 | 例 |
---|---|
SQUARE_1_TO_1 |
|
PORTRAIT_2_TO_3 |
|
LANDSCAPE_16_TO_9 |
メッセージ
ユーザーがメディア ブラウズ UI からアイテムの 1 つを選択すると、Web Receiver SDK は選択された BrowseItem
の値に従って LOAD
メッセージをアプリケーションに送信します。
サンプルコード
const controls = cast.framework.ui.Controls.getInstance();
const item1 = new cast.framework.ui.BrowseItem();
item1.title = 'Title 1';
item1.subtitle = 'Subtitle 1';
item1.duration = 300;
item1.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item1.image = new cast.framework.messages.Image('1.jpg');
item1.entity = 'example://gizmos/1';
const item2 = new cast.framework.ui.BrowseItem();
item2.title = 'Title 2';
item2.subtitle = 'Subtitle 2';
item2.duration = 100;
item2.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item2.image = new cast.framework.messages.Image('2.jpg');
item2.entity = 'example://gizmos/2';
const items = [item1, item2];
const browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = items;
playerDataBinder.addEventListener(
cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
(e) => {
// Media browse
controls.setBrowseContent(browseContent);
});
playerManager.setMessageInterceptor(
cast.framework.messages.MessageType.LOAD, loadRequestData => {
if (loadRequestData.media && loadRequestData.media.entity) {
// Load by entity
loadRequestData.media.contentId = entityToId(loadRequestData.media.entity);
loadRequestData.media.contentUrl = entityToUrl(loadRequestData.media.entity);
}
return loadRequestData;
});