미디어 탐색

Cast 미디어 탐색 (CMB)은 스마트 디스플레이 사용자가 오디오 또는 동영상 콘텐츠 카탈로그를 찾고 상호작용할 수 있는 기능입니다. CMB는 스마트 디스플레이에 맞게 특별히 조정된 간소화된 탐색 환경으로 웹 수신자를 향상시킵니다.

CMB는 스마트 디스플레이 UI 규칙을 따르는 일관된 탐색 환경을 제공하는 표준 템플릿을 정의합니다. 개발자는 이러한 표준화된 템플릿을 채울 데이터를 제공합니다. 템플릿은 오디오 및 동영상 콘텐츠 또는 이 둘의 조합을 지원합니다.

진입점

CMB의 진입점에는 두 가지가 있으며, 사용자는 터치 또는 음성 제어를 사용하여 콘텐츠를 둘러보고 선택할 수 있습니다.

플레이어 내 탐색

재생 중에 위로 스와이프하여 애플리케이션 제공 콘텐츠 목록에서 선택합니다.

동영상

미디어 탐색 항목 - 플레이어 내 동영상 1 미디어 탐색 항목 - 플레이어 내 동영상 2

오디오

미디어 탐색 항목 - 플레이어 오디오 1 미디어 탐색 항목 - 플레이어 내 오디오 2

방문 페이지 탐색

cast-media-player 요소가 있는 웹 수신기가 스마트 디스플레이에서 실행 중일 때는 유휴 상태 시 CMB가 표시됩니다.

동영상 및 오디오

미디어 탐색 항목 - 방문 페이지 동영상 미디어 탐색 항목 - 방문 페이지 오디오

콘텐츠 추가 중

개발자는 각 진입점에 있는 템플릿을 각 콘텐츠 항목의 데이터로 채웁니다. 플레이어 탐색에 콘텐츠를 표시하는 데 사용되는 콘텐츠는 방문 페이지 검색을 채우는 데 사용되는 콘텐츠와 다를 수 있습니다.

플레이어 내 탐색을 사용하여 사용자가 현재 재생 중인 콘텐츠 또는 재생목록의 항목과 관련된 항목을 표시합니다. 실시간 TV 제공업체는 이 진입점을 사용하여 쉽게 액세스할 수 있는 채널 목록을 채울 수도 있습니다.

방문 페이지 탐색을 사용하여 새로운 오리지널 콘텐츠, 현재 게시 중인 콘텐츠 또는 사용자가 관심을 가질만한 콘텐츠에 대한 인지도를 높이세요.

미디어 탐색 사용 설정

setBrowseContent를 호출하여 탐색할 미디어 콘텐츠 목록을 제공합니다.

const controls = cast.framework.ui.Controls.getInstance();
controls.setBrowseContent(BrowseContent);

이 메서드를 호출한 직후에 미디어 탐색 UI가 업데이트됩니다.

안전 영역 높이

CMB가 사용 설정되면 Cast SDK UI 안전 영역의 높이가 변경되므로 기존 Web Receiver UI를 업데이트해야 할 수 있습니다. getSafeAreaHeight를 사용하여 안전 영역의 높이를 확인합니다.

// Media Browse UI enabled
controls.setBrowseContent(BrowseContent);
console.log(controls.getSafeAreaHeight()); // 338px on Google Nest Hub

// Media Browse UI disabled
controls.setBrowseContent(null);
console.log(controls.getSafeAreaHeight()); // 408px on Google Nest Hub

미디어 탐색 삭제

미디어 탐색 UI를 삭제하려면 setBrowseContent와 함께 null를 사용합니다.

controls.setBrowseContent(null);

미디어 탐색 맞춤설정

콘텐츠 탐색

BrowseContent을 사용하여 미디어 탐색 UI의 제목을 맞춤설정하고 항목을 업데이트합니다.

미디어 탐색 - 콘텐츠 찾아보기

A. BrowseContent.title

B. BrowseContent.items

BrowseItem을 사용하여 미디어 탐색 UI의 각 항목에 제목, 부제목, 길이, 이미지를 표시합니다.

미디어 탐색 - 항목 탐색

A. BrowseItem.image

B. BrowseItem.duration

C. BrowseItem.title

D. BrowseItem.subtitle

가로 세로 비율

targetAspectRatio를 사용하여 이미지 애셋에 가장 적합한 가로세로 비율을 선택합니다. 웹 수신기 SDK에서 지원하는 세 가지 가로세로 비율은 다음과 같습니다.

가로 세로 비율 예
SQUARE_1_TO_1 미디어 탐색 - 정사각형 가로세로 비율
PORTRAIT_2_TO_3 미디어 탐색 - 세로 모드 가로세로 비율
LANDSCAPE_16_TO_9 미디어 탐색 - 가로 모드 가로세로 비율

메시지

사용자가 미디어 탐색 UI에서 항목 중 하나를 선택하면 Web Receiver SDK가 선택된 BrowseItem의 값에 따라 LOAD 메시지를 애플리케이션에 전송합니다.

샘플 코드

const controls = cast.framework.ui.Controls.getInstance();

const item1 = new cast.framework.ui.BrowseItem();
item1.title = 'Title 1';
item1.subtitle = 'Subtitle 1';
item1.duration = 300;
item1.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item1.image = new cast.framework.messages.Image('1.jpg');
item1.entity = 'example://gizmos/1';

const item2 = new cast.framework.ui.BrowseItem();
item2.title = 'Title 2';
item2.subtitle = 'Subtitle 2';
item2.duration = 100;
item2.imageType = cast.framework.ui.BrowseImageType.MUSIC_TRACK;
item2.image = new cast.framework.messages.Image('2.jpg');
item2.entity = 'example://gizmos/2';

const items = [item1, item2];

const browseContent = new cast.framework.ui.BrowseContent();
browseContent.title = 'Up Next';
browseContent.items = items;

playerDataBinder.addEventListener(
  cast.framework.ui.PlayerDataEventType.MEDIA_CHANGED,
  (e) => {
    // Media browse
    controls.setBrowseContent(browseContent);
  });

playerManager.setMessageInterceptor(
  cast.framework.messages.MessageType.LOAD, loadRequestData => {
    if (loadRequestData.media && loadRequestData.media.entity) {
      // Load by entity
      loadRequestData.media.contentId = entityToId(loadRequestData.media.entity);
      loadRequestData.media.contentUrl = entityToUrl(loadRequestData.media.entity);
    }
    return loadRequestData;
  });
이전
스마트 디스플레이에 최적화
다음
트랙