スマート ディスプレイは、タッチ機能を備えており、ウェブレシーバー アプリでタッチ対応コントロールをサポートするデバイスです。Web Receiver SDK ではデフォルトのプレーヤー エクスペリエンスが用意されており、プレーヤー コントロールをカスタマイズできます。
このガイドでは、スマートディスプレイでウェブ レシーバ アプリを起動したときにアプリを最適化する方法と、プレーヤー コントロールをカスタマイズする方法について説明します。
UI コントロールへのアクセス
UI Controls オブジェクトには次のコードでアクセスできます。
const controls = cast.framework.ui.Controls.getInstance();
cast-media-player
要素を使用していない場合は、UiConfig
の CastReceiverOptions
で touchScreenOptimizedApp
プロパティを true
に設定する必要があります。
context.start({
uiConfig: {
touchScreenOptimizedApp: true
}
});
デフォルトの動画 UI
デフォルトのコントロール ボタンが、MetadataType
と MediaStatus.supportedMediaCommands
に基づいて各スロットに割り当てられます。
MetadataType.Movie、MetadataType.Generic
B. MovieMediaMetadata.subtitle
または GenericMediaMetadata.subtitle
。
C. MovieMediaMetadata.title
または GenericMediaMetadata.title
。
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
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist
、MusicTrackMediaMetadata.artist
、MusicTrackMediaMetadata.composer
EMusicTrackMediaMetadata.images[0]
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
でサポートされていない場合、そのボタンはグレー表示されます。たとえば、supportedMediaCommands
が ALL_BASIC_MEDIA | QUEUE_NEXT | LIKE | DISLIKE
と等しい場合、QUEUE_PREV
ボタンは無効になります。
Web Receiver コンテキストの開始後に supportedMediaCommands
の値を動的に変更するには、PlayerManager.setSupportedMediaCommands
を呼び出して、値をオーバーライドします。また、addSupportedMediaCommands
を使用して新しいコマンドを追加したり、removeSupportedMediaCommands
を使用して既存のコマンドを削除したりできます。
セカンダリ イメージ
セカンダリ画像を使用すると、キャスト デベロッパーは、音声や動画アプリの情報画像を UI に柔軟に追加でき、ローカル チャンネルのロゴやメディア形式などを表示できます。この新機能は、Chromecast、スマートディスプレイ、Chromecast with Google TV のさまざまなキャスト ディスプレイ プラットフォームで一貫した UI を維持しながら、オーバーヘッドを抑えたものです。