Styled Media Receiver

The Styled Media Receiver (SMR) allows your sender application to play media on a Cast device without creating your own custom receiver application. You can customize the SMR color scheme and branding by providing your own CSS file during registration.

Registration

To use the SMR for your application select the Styled Media Receiver option when you add a new application in the Google Cast SDK Developer Console. See Registration for more information. This option includes a link to Preview the default style sheet as well as a field where you enter the URL to your style sheet. You can either use the default styles or provide the HTTPS URL to your CSS file. You can use your own server to host the CSS file. Once you provide the URL to your CSS file, you can click Preview to see how your styles will look on the receiver.

Note: If you register a Styled Media Receiver, but just use the default styles, the receiver displays your application name when the receiver is loading or in the idle state.

Supported media

All receivers support the media types, as described in Supported Media.

The SMR supports video, audio and images and is controlled from a sender application using the Cast SDK media channel. The SMR fully complies with the UX Guidelines for media playback on a Cast device.

Type fonts

See Pre-installed fonts for a list of fonts pre-installed with the receiver.

CSS

The Styled Media Receiver uses the following CSS classes:

• .background: The background for the receiver.
• .logo: The logo shown when the receiver is launching. This class is also used when the receiver is in the idle state and no .splash class is declared.
• .progressBar: The progress bar for media playback.
• .splash: The screen shown when the receiver is in an idle state. If this class is not declared, the receiver will default to .logo or the app name.
• .watermark: A watermark shown when the media is playing.

Here is an example CSS file that uses these classes:

.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;
}

Following are some illustrations of these classes in use.

Video

Note: The video image art is 96x143 pixels and the first image resource associated with the media metadata is selected for display. Images are scaled to fit the expected dimensions.

Audio

Note: The audio album art is 384x384 pixels and the first image resource associated with the media metadata is selected for display. Images are scaled to fit the expected dimensions.

       

Images from Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org

Image from Sintel: (c) copyright Blender Foundation / www.sintel.org