Cast 미디어 탐색 (CMB)은 스마트 디스플레이 사용자가 오디오 또는 동영상 콘텐츠 카탈로그를 찾고 상호작용할 수 있는 기능입니다. CMB는 스마트 디스플레이에 맞게 특별히 조정된 간소화된 탐색 환경으로 웹 수신자를 향상시킵니다.
CMB는 스마트 디스플레이 UI 규칙을 따르는 일관된 탐색 환경을 제공하는 표준 템플릿을 정의합니다. 개발자는 이러한 표준화된 템플릿을 채울 데이터를 제공합니다. 템플릿은 오디오 및 동영상 콘텐츠 또는 이 둘의 조합을 지원합니다.
진입점
CMB의 진입점에는 두 가지가 있으며, 사용자는 터치 또는 음성 제어를 사용하여 콘텐츠를 둘러보고 선택할 수 있습니다.
플레이어 내 탐색
재생 중에 위로 스와이프하여 애플리케이션 제공 콘텐츠 목록에서 선택합니다.
동영상
오디오
방문 페이지 탐색
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의 제목을 맞춤설정하고 항목을 업데이트합니다.
BrowseItem
을 사용하여 미디어 탐색 UI의 각 항목에 제목, 부제목, 길이, 이미지를 표시합니다.
가로 세로 비율
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;
});