このページは Cloud Translation API によって翻訳されました。

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

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

登録

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

対応メディア

サポートされているメディアで説明されているように、すべてのレシーバはメディアタイプをサポートしています。

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 ピクセルで、メディアメタデータに関連付けられている最初の画像リソースが表示用に選択されます。画像は適切なサイズに合わせて調整されます。

Sintel からの画像: （c）copyright Blender Foundation / www.sintel.org

概要

カスタムのウェブレシーバー