このページは Cloud Translation API によって翻訳されました。

メディア参照

キャストメディアブラウズ（CMB）は、スマートディスプレイユーザーが音声や動画のコンテンツカタログを見つけて操作できるようにする機能です。CMB は、スマートディスプレイ用に特別に調整された効率的なブラウジング体験でウェブレシーバーを拡張します。

CMB は、スマートディスプレイ UI の規則に沿った一貫したブラウジングエクスペリエンスを提供する標準化されたテンプレートを定義しています。デベロッパーは、これらの標準化されたテンプレートにデータを提供して入力します。テンプレートでは、音声と動画のコンテンツの両方、または両方を組み合わせることができます。

エントリポイント

CMB のエントリポイントは 2 つあります。ユーザーはここから、タップ操作または音声操作でコンテンツをブラウジングして選択できます。

プレーヤーブラウジング

再生中に上にスワイプすると、アプリで提供されるコンテンツの一覧が表示されます。

動画

メディア参照エントリ - プレーヤーの動画 1 メディア参照エントリ - プレーヤーの動画 2

音声

メディア参照エントリ - プレーヤーのオーディオ 1 内メディア参照エントリ - プレーヤーオーディオ 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 のタイトルをカスタマイズし、アイテムを更新します。

メディア参照 - コンテンツ閲覧

A. BrowseContent.title

B. BrowseContent.items

BrowseItem を使用して、メディアブラウズ UI で各アイテムのタイトル、サブタイトル、再生時間、画像を表示します。

メディア参照 - ブラウズアイテム

A. BrowseItem.image

B. BrowseItem.duration

C. BrowseItem.title

D. BrowseItem.subtitle

アスペクト比

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;
  });

スマートディスプレイ向けに最適化する

トラック