스마트 디스플레이는 웹 수신기 애플리케이션이 터치 지원 컨트롤을 지원하도록 허용하는 터치 기능이 있는 기기입니다. 웹 수신기 SDK는 플레이어 컨트롤을 추가로 맞춤설정하여 기본 UI 환경을 제공합니다.
이 가이드에서는 스마트 디스플레이에서 웹 수신기 애플리케이션을 실행할 때 최적화하는 방법과 플레이어 컨트롤을 맞춤설정하는 방법을 설명합니다.
UI 컨트롤 액세스
다음 코드로 UI 컨트롤 객체에 액세스할 수 있습니다.
const controls = cast.framework.ui.Controls.getInstance();
cast-media-player
요소를 사용하지 않는 경우 CastReceiverOptions
아래 UiConfig
에서 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. 재생/일시정지
1. ControlsSlot.SLOT_PRIMARY_2
지영 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
메타데이터 유형.MUSIC_TRACK
B. MusicTrackMediaMetadata.albumName
C. MusicTrackMediaMetadata.title
D. MusicTrackMediaMetadata.albumArtist
, MusicTrackMediaMetadata.artist
또는 MusicTrackMediaMetadata.composer
예: MusicTrackMediaMetadata.images[0]
하워드 ControlsSlot.SLOT_SECONDARY_1
1. ControlsSlot.SLOT_PRIMARY_1
J. 재생/일시정지
K: ControlsSlot.SLOT_PRIMARY_2
리사 ControlsSlot.SLOT_SECONDARY_2
supportedMediaCommands
값이 ALL_BASIC_MEDIA
와 같으면 기본 컨트롤 레이아웃이 다음과 같이 표시됩니다.
supportedMediaCommands
값이 ALL_BASIC_MEDIA |
QUEUE_PREV | QUEUE_NEXT
와 같으면 기본 컨트롤 레이아웃이 다음과 같이 표시됩니다.
웹 수신자 컨텍스트를 시작한 후 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
버튼이 사용 중지됩니다.
웹 수신기 컨텍스트를 시작한 후 supportedMediaCommands
값을 동적으로 변경하려면 PlayerManager.setSupportedMediaCommands
를 호출하여 값을 재정의하면 됩니다. addSupportedMediaCommands
를 사용하여 새 명령어를 추가하거나 removeSupportedMediaCommands
를 사용하여 기존 명령어를 삭제할 수도 있습니다.
보조 이미지
보조 이미지를 사용하면 Cast 개발자가 로컬 채널 로고 또는 미디어 형식 등을 표시할 수 있는 오디오 및 동영상 애플리케이션의 UI에 정보성 이미지를 유연하게 추가할 수 있습니다. 이 새로운 기능은 Chromecast, 스마트 디스플레이, Chromecast with Google TV 등 다양한 Cast 디스플레이 플랫폼에서 일관된 UI를 유지하면서 오버헤드가 거의 없습니다.