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

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

スマートディスプレイは、タッチセンサーを搭載し、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

A: --playback-logo-image

B. MovieMediaMetadata.subtitle または GenericMediaMetadata.subtitle。

C. MovieMediaMetadata.title または GenericMediaMetadata.title。

D. MediaStatus.currentTime

E: MediaInformation.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.albumArtist、MusicTrackMediaMetadata.artist、MusicTrackMediaMetadata.composer のいずれか

E: MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

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 などです。

プレーヤーのスタイルを設定する

メディアブラウズ