스마트 디스플레이에 최적화

스마트 디스플레이는 웹 수신기 애플리케이션이 터치 지원 컨트롤을 지원하도록 허용하는 터치 기능이 있는 기기입니다. 웹 수신기 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

A. --playback-logo-image

B. MovieMediaMetadata.subtitle 또는 GenericMediaMetadata.subtitle

C. MovieMediaMetadata.title 또는 GenericMediaMetadata.title

D. MediaStatus.currentTime

예: MediaInformation.duration

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

A. --playback-logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist, MusicTrackMediaMetadata.artist 또는 MusicTrackMediaMetadata.composer

예: MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

하워드 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를 유지하면서 오버헤드가 거의 없습니다.

이전
플레이어의 스타일 지정
다음
미디어 탐색