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

スマート ディスプレイは、タッチ機能を備えており、ウェブレシーバー アプリでタッチ対応コントロールをサポートするデバイスです。Web Receiver SDK ではデフォルトのプレーヤー エクスペリエンスが用意されており、プレーヤー コントロールをカスタマイズできます。

このガイドでは、スマートディスプレイでウェブ レシーバ アプリを起動したときにアプリを最適化する方法と、プレーヤー コントロールをカスタマイズする方法について説明します。

UI コントロールへのアクセス

UI Controls オブジェクトには次のコードでアクセスできます。

const controls = cast.framework.ui.Controls.getInstance();

cast-media-player 要素を使用していない場合は、UiConfigCastReceiverOptionstouchScreenOptimizedApp プロパティを true に設定する必要があります。

context.start({
  uiConfig: {
    touchScreenOptimizedApp: true
  }
});

デフォルトの動画 UI

デフォルトのコントロール ボタンが、MetadataTypeMediaStatus.supportedMediaCommands に基づいて各スロットに割り当てられます。

MetadataType.Movie、MetadataType.Generic

A. --playback-logo-image

B. MovieMediaMetadata.subtitle または GenericMediaMetadata.subtitle

C. MovieMediaMetadata.title または GenericMediaMetadata.title

D. MediaStatus.currentTime

EMediaInformation.duration

F. ControlsSlot.SLOT_SECONDARY_1

G. ControlsSlot.SLOT_PRIMARY_1

H.。再生 / 一時停止

I. ControlsSlot.SLOT_PRIMARY_2

J. ControlsSlot.SLOT_SECONDARY_2 さん

supportedMediaCommands の値が ALL_BASIC_MEDIA と等しい場合、デフォルトのコントロール レイアウトは次のようになります。

supportedMediaCommands の値が ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT と等しい場合、デフォルトのコントロール レイアウトは次のようになります。

supportedMediaCommands の値が PAUSE | QUEUE_PREV | QUEUE_NEXT と等しい場合、デフォルトのコントロール レイアウトは次のようになります。

テキスト トラックが利用可能な場合、SLOT_SECONDARY_1 に字幕ボタンが常に表示されます。

レシーバ コンテキストの開始後に supportedMediaCommands の値を動的に変更するには、PlayerManager.setSupportedMediaCommands を呼び出して、値をオーバーライドします。また、addSupportedMediaCommands を使用して新しいコマンドを追加したり、removeSupportedMediaCommands を使用して既存のコマンドを削除したりできます。

デフォルトのオーディオ UI

MetadataType.MUSIC_TRACK

A. --playback-logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtistMusicTrackMediaMetadata.artistMusicTrackMediaMetadata.composer

EMusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

HControlsSlot.SLOT_SECONDARY_1 さん

I. ControlsSlot.SLOT_PRIMARY_1

J. 再生 / 一時停止

K. ControlsSlot.SLOT_PRIMARY_2

L. ControlsSlot.SLOT_SECONDARY_2

supportedMediaCommands の値が ALL_BASIC_MEDIA と等しい場合、デフォルトのコントロール レイアウトは次のようになります。

supportedMediaCommands の値が ALL_BASIC_MEDIA | QUEUE_PREV | QUEUE_NEXT と等しい場合、デフォルトのコントロール レイアウトは次のようになります。

Web Receiver コンテキストの開始後に supportedMediaCommands の値を動的に変更するには、PlayerManager.setSupportedMediaCommands を呼び出して、値をオーバーライドします。また、addSupportedMediaCommands を使用して新しいコマンドを追加したり、removeSupportedMediaCommands を使用して既存のコマンドを削除したりできます。

UI コントロール ボタンのレイアウトをカスタマイズする

UI コントロールのボタンを変更する場合はカスタム レイアウトを使用します。

const controls = cast.framework.ui.Controls.getInstance();
controls.clearDefaultSlotAssignments();

その後、assignButton を呼び出して、コントロール ボタンを 4 つのスロットに割り当てることができます。

controls.assignButton(
  cast.framework.ui.ControlsSlot.SLOT_SECONDARY_1,
  cast.framework.ui.ControlsButton.LIKE
)

controls.assignButton(
  cast.framework.ui.ControlsSlot.SLOT_SECONDARY_2,
  cast.framework.ui.ControlsButton.DISLIKE
)

カスタム レイアウトは次のようになります。

割り当てられたボタンが MediaStatus.supportedMediaCommands でサポートされていない場合、そのボタンはグレー表示されます。たとえば、supportedMediaCommandsALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE と等しい場合、QUEUE_PREV ボタンは無効になります。

Web Receiver コンテキストの開始後に supportedMediaCommands の値を動的に変更するには、PlayerManager.setSupportedMediaCommands を呼び出して、値をオーバーライドします。また、addSupportedMediaCommands を使用して新しいコマンドを追加したり、removeSupportedMediaCommands を使用して既存のコマンドを削除したりできます。

セカンダリ イメージ

セカンダリ画像を使用すると、キャスト デベロッパーは、音声や動画アプリの情報画像を UI に柔軟に追加でき、ローカル チャンネルのロゴやメディア形式などを表示できます。この新機能は、Chromecast、スマートディスプレイ、Chromecast with Google TV のさまざまなキャスト ディスプレイ プラットフォームで一貫した UI を維持しながら、オーバーヘッドを抑えたものです。