스타일 미디어 수신기

SMR (Styled Media Receiver)을 사용하면 발신기 앱에서 자체 맞춤 수신기 애플리케이션을 만들지 않고도 Cast 기기에서 미디어를 재생할 수 있습니다. 등록 중에 자체 CSS 파일을 제공하여 SMR 색 구성표와 브랜드를 맞춤설정할 수 있습니다.

등록

애플리케이션에 SMR을 사용하려면 Google Cast SDK 개발자 콘솔에서 새 애플리케이션을 추가할 때 스타일 미디어 수신기 옵션을 선택합니다. 자세한 내용은 등록을 참고하세요. 이 옵션에는 기본 스타일 시트 미리보기 링크와 스타일 시트 URL을 입력하는 필드가 포함되어 있습니다. 기본 스타일을 사용하거나 CSS 파일에 HTTPS URL을 제공할 수 있습니다. 자체 서버를 사용하여 CSS 파일을 호스팅할 수 있습니다. CSS 파일 URL을 제공하면 미리보기를 클릭하여 스타일이 수신기에 어떻게 표시되는지 확인할 수 있습니다.

지원되는 미디어

모든 수신기는 지원되는 미디어에 설명된 대로 미디어 유형을 지원합니다.

SMR은 동영상, 오디오, 이미지를 지원하며 Cast SDK 미디어 채널을 사용하여 발신기에서 제어합니다. SMR은 Cast 기기에서 미디어 재생에 관한 UX 가이드라인을 완전히 준수합니다.

글꼴 입력

수신기와 함께 사전 설치된 글꼴 목록은 사전 설치된 글꼴을 참고하세요.

CSS

스타일 미디어 수신기는 다음 CSS 클래스를 사용합니다.

  • .background: 수신기의 배경입니다.
  • .logo: 수신기가 시작될 때 표시되는 로고입니다. 수신기가 유휴 상태에 있고 .splash 클래스가 선언되지 않은 경우에도 이 클래스가 사용됩니다.
  • .progressBar: 미디어 재생의 진행률 표시줄입니다.
  • .splash: 수신기가 유휴 상태일 때 표시되는 화면입니다. 이 클래스가 선언되지 않은 경우 수신기는 기본적으로 .logo 또는 앱 이름으로 설정됩니다.
  • .watermark: 미디어가 재생 중일 때 표시되는 워터마크.

다음은 이러한 클래스를 사용하는 CSS 파일의 예입니다.

.background {
  background: center no-repeat url(background.png);
}

.logo {
  background-image: url(logo.png);
}

.progressBar {
  background-color: rgb(238, 255, 65);
}

.splash {
  background-image: url(splash.png);
}

.watermark {
  background-image: url(watermark.png);
  background-size: 57px 57px;
}

다음은 이러한 클래스의 몇 가지 예입니다.

동영상

참고: 동영상 이미지 아트는 96x143픽셀이며 미디어 메타데이터와 연결된 첫 번째 이미지 리소스가 선택됩니다. 이미지는 예상 크기에 맞게 조정됩니다.

오디오

참고: 오디오 앨범 아트는 384x384픽셀이고 미디어 메타데이터와 연결된 첫 번째 이미지 리소스가 표시되도록 선택됩니다. 이미지는 예상 크기에 맞게 조정됩니다.

       

Big Buck Bunny의 이미지: (c) 저작권 2008, Blender Foundation / www.bigbuckbunny.org

Sintel 이미지: (c) 저작권 Blender Foundation / www.sintel.org