スタイル付きメディア レシーバー(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 ピクセルで、メディア メタデータに関連付けられている最初の画像リソースが表示用に選択されます。画像は適切なサイズに合わせて調整されます。
Big Buck Bunny からの画像: (c)copyright 2008, Blender Foundation / www.bigbuckbunny.org
Sintel からの画像: (c)copyright Blender Foundation / www.sintel.org