スタイル付きメディア レシーバー

スタイル付きメディア レシーバー(SMR)を使用すると、送信側アプリケーションで独自のカスタム レシーバー アプリを作成せずに、キャスト デバイスでメディアを再生できるようになります。登録時に独自の CSS ファイルを提供することで、SMR のカラーパターンとブランディングをカスタマイズできます。

登録

アプリに SMR を使用するには、Google Cast SDK Developer Console で新しいアプリを追加する際に、[Styled Media Receiver] オプションを選択します。詳細については、登録をご覧ください。このオプションには、デフォルトのスタイルシートをプレビューするリンクと、スタイルシートの URL を入力するフィールドがあります。デフォルトのスタイルを使用することも、CSS ファイルへの HTTPS URL を指定することもできます。独自のサーバーを使用して CSS ファイルをホストできます。CSS ファイルの URL を指定したら、[プレビュー] をクリックして、レシーバでスタイルがどのように表示されるかを確認できます。

サポートされているメディア

サポートされているメディアに記載されているとおり、すべてのレシーバーがメディアタイプをサポートしています。

SMR は、動画、音声、画像をサポートし、Cast SDK メディア チャネルを使用して送信側アプリから制御します。SMR は、キャスト デバイスでのメディア再生に関する 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)copyright Blender Foundation / www.sintel.org