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

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

スタイル付きメディアレシーバー（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;
}

以下に、これらのクラスを使用する例を示します。