스타일 미디어 수신기

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

등록

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

지원되는 미디어

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

SMR은 동영상, 오디오, 이미지를 지원하며 Cast SDK 미디어 채널을 사용하여 발신기 애플리케이션에서 제어합니다. SMR은 Cast 기기에서의 미디어 재생과 관련된 UX 가이드라인을 완벽하게 준수합니다.

글꼴 입력

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

CSS

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

  • .background: 수신기의 배경입니다.
  • .logo: 수신기를 실행할 때 표시되는 로고 이 클래스는 broadcast receiver가 유휴 상태에 있고 .splash 클래스가 선언되지 않은 경우에도 사용됩니다.
  • .progressBar: 미디어 재생의 진행률 표시줄입니다.
  • .splash: 수신기가 유휴 상태일 때 표시되는 화면. 이 클래스가 선언되지 않으면 broadcast receiver는 기본적으로 .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) copyright 2008, Blender Foundation / www.bigbuckbunny.org

Sintel 이미지: (c) copyright Blender Foundation / www.sintel.org