スマートディスプレイは、タッチセンサーを搭載し、Web Receiver が利用できるデバイスです。 タップ操作に対応できるようにしています。Web Receiver SDK は プレーヤー コントロールをさらにカスタマイズします。
このガイドでは、起動時に Web Receiver アプリケーションを最適化する方法について説明します プレーヤー コントロールをカスタマイズする方法についても紹介します。
UI コントロールへのアクセス
UI コントロール オブジェクトには、次のコードでアクセスできます。
const controls = cast.framework.ui.Controls.getInstance();
cast-media-player 要素を使用していない場合は、次のように設定する必要があります。
touchScreenOptimizedApp プロパティを UiConfig の true に設定
CastReceiverOptions 未満。
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 のいずれか
E: MusicTrackMediaMetadata.images[0]
H. ControlsSlot.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 の場合、デフォルトのコントロール レイアウトは次のように表示されます。
開始後に supportedMediaCommands の値を動的に変更するには、
ウェブ レシーバー コンテキストでは、PlayerManager.setSupportedMediaCommands を呼び出すことができます。
値をオーバーライドします。また、gcloud コマンドを使用して新しいコマンドを
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
ボタンが無効になります。
次の時間が経過したら supportedMediaCommands の値を動的に変更する
開始するには、PlayerManager.setSupportedMediaCommands を呼び出します。
値をオーバーライドします。また、addSupportedMediaCommands を使用して新しいコマンドを追加することもできます。
既存のコマンドを削除するには、removeSupportedMediaCommands を使用します。
セカンダリ画像
[Secondary Image] でキャスト機能を使用します。 デベロッパーは音声用の情報画像を UI に柔軟に追加できる ローカル チャンネルのロゴやメディア フォーマットを表示するために 例です。この新機能のオーバーヘッドはわずかですが さまざまな Cast ディスプレイ プラットフォーム（Chromecast、 スマート ディスプレイ、Chromecast with Google TV などです。