Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

プレーヤーのスタイルを設定する

ウェブレシーバー SDK には、組み込みのプレーヤー UI が用意されています。この UI をカスタムウェブレシーバーアプリに実装するには、HTML ファイルの body に cast-media-player 要素を追加する必要があります。

<body>
  <cast-media-player></cast-media-player>
</body>

CSS 変数を使用すると、プレーヤーの背景、スプラッシュ画像、フォントファミリーなど、さまざまな cast-media-player プロパティをカスタマイズできます。これらの変数は、インライン CSS スタイル、CSS スタイルシート、または JavaScript の style.setProperty を使用して追加できます。

次のセクションでは、メディアプレーヤー要素の各領域をカスタマイズする方法について説明します。以下のテンプレートを使用して、作業を開始できます。

外部

index.html

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="css/receiver.css" media="screen" />
  <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
</body>
<footer>
  <script src="js/receiver.js"></script>
</footer>
</html>

js/receiver.js

const context = cast.framework.CastReceiverContext.getInstance();

...

// Update style using javascript
let playerElement = document.getElementsByTagName("cast-media-player")[0];
playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")');

...

context.start();

css/receiver.css

body {
  --playback-logo-image: url('http://some/image.png');
}
cast-media-player {
  --theme-hue: 100;
  --progress-color: rgb(0, 255, 0);
  --splash-image: url('http://some/image.png');
  --splash-size: cover;
}

インライン

<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/caf_receiver/v3/cast_receiver_framework.js">
  </script>
</head>
<body>
  <cast-media-player></cast-media-player>
  <style>
    body {
      --playback-logo-image: url('http://some/image.png');
    }
    cast-media-player {
      --theme-hue: 100;
      --progress-color: rgb(0, 255, 0);
      --splash-image: url('http://some/image.png');
    }
  </style>
  <script>
    const context = cast.framework.CastReceiverContext.getInstance();

    ...

    // Update style using javascript
    let playerElement = document.getElementsByTagName("cast-media-player")[0];
    playerElement.style.setProperty('--splash-image', 'url("http://some/other/image.png")');

    ...

    context.start();
  </script>
</body>
</html>

Playback のロゴ

メディアの再生中は、再生ロゴがレシーバーの左上に表示されます。このプロパティは .logo クラスとは別のものです。body セレクタから --playback-logo-image をカスタマイズできます。

body {
  --playback-logo-image: url('image.png'); /* set from the body selector */
}

プレーヤーの背景プロパティ

--background 変数は、起動時と再生時に表示されるプレーヤー全体の背景プロパティを設定します。たとえば、背景全体を白と銀の線形グラデーションに設定できます。

cast-media-player {
  --background-image: linear-gradient(white, silver);
}

ウェブレシーバーの表示:

カスタムの背景

次の変数を使用して、.background プロパティをカスタマイズできます。

変数とデフォルト

名前	デフォルト値	説明
--background	Black	CSS の background プロパティ
--background-color		CSS background-color プロパティ
--background-image		CSS の background-image プロパティ
--background-repeat	no-repeat	CSS background-repeat プロパティ
--background-size	、	CSS の background-size プロパティ

CSS テンプレート

cast-media-player {
  --background:
  --background-color:
  --background-image:
  --background-repeat:
  --background-size:
}

ロゴのプロパティ

.logo クラスは .background クラスの前に配置され、プレーヤー全体に及びます。このクラスは、レシーバーの起動時に表示されます。.splash 変数を指定しない場合、レシーバーがアイドル状態のときにも .logo クラスが表示されます。

次の例では、--logo-image を welcome.png という名前のイコライザーアイコンに設定します。画像はデフォルトでレシーバーの中央に表示されます。

cast-media-player {
  --logo-image: url('welcome.png');
}

ウェブレシーバーの表示:

次の変数を使用して、.logo プロパティをカスタマイズできます。

変数とデフォルト

名前	デフォルト値	説明
--logo-background		CSS の background プロパティ
--logo-color		CSS background-color プロパティ
--logo-image		CSS の background-image プロパティ
--logo-repeat	no-repeat	CSS background-repeat プロパティ
--logo-size		CSS の background-size プロパティ

CSS テンプレート

cast-media-player {
  --logo-background:
  --logo-color:
  --logo-image:
  --logo-repeat:
  --logo-size:
}

スプラッシュのプロパティ

.logo クラスと同様に、.splash クラスはプレーヤー全体に及びます。これらのプロパティを設定すると、レシーバがアイドル状態のときに .splash 変数が .logo 変数をオーバーライドします。つまり、起動時に 1 つの .logo プロパティセットを使用し、レシーバがアイドル状態のときに別の背景や画像を表示できます。

たとえば、白と銀のグラデーションの背景を dimgray でオーバーライドし、アニメーションの「お待ちください...」アイコンを追加できます。

cast-media-player {
  --splash-color: dimgray;
  --splash-image: url('waiting.png');
}

ウェブレシーバーの表示:

カスタムスプラッシュ

これらのプロパティを設定しない場合、レシーバがアイドル状態になると、デフォルトで .logo の設定またはアプリ名が表示されます。

次の変数を使用して、.splash プロパティをカスタマイズできます。

変数とデフォルト

名前	デフォルト値	説明
--splash-background		CSS の background プロパティ
--splash-color		CSS background-color プロパティ
--splash-image		CSS の background-image プロパティ
--splash-repeat		CSS background-repeat プロパティ
--splash-size		CSS の background-size プロパティ

CSS テンプレート

cast-media-player {
  --splash-background:
  --splash-color:
  --splash-image:
  --splash-repeat:
  --splash-size:
}

スライドショー

アイドル状態（スプラッシュ画像の代わり）で最大 10 枚の画像を切り替えるには、次のスライドショーパラメータを使用します。

変数とデフォルト

名前	デフォルト値	説明
--slideshow-interval-duration	10 秒	画像間の時間。
--slideshow-animation-duration	2 秒	トランジションの期間。
--slideshow-image-1		スライドショーの最初の画像。
--slideshow-image-2		スライドショーの 2 枚目の画像。
--slideshow-image-3		スライドショーの 3 番目の画像。
--slideshow-image-4		スライドショーの 4 枚目の画像。
--slideshow-image-5		スライドショーの 5 番目の画像。
--slideshow-image-6		スライドショーの 6 枚目の画像。
--slideshow-image-7		スライドショーの 7 枚目の画像。
--slideshow-image-8		スライドショーの 8 枚目の画像。
--slideshow-image-9		スライドショーの 9 枚目の画像。
--slideshow-image-10		スライドショーの 10 枚目の画像。

CSS テンプレート

cast-media-player {
  --slideshow-interval-duration:
  --slideshow-animation-duration:
  --slideshow-image-1:
  --slideshow-image-2:
  --slideshow-image-3:
  --slideshow-image-4:
  --slideshow-image-5:
  --slideshow-image-6:
  --slideshow-image-7:
  --slideshow-image-8:
  --slideshow-image-9:
  --slideshow-image-10:
}

透かしのプロパティ

メディアの再生中は .watermark が表示されます。通常は透明な小さな画像で、デフォルトでは受信機の右下に表示されます。

次の変数を使用して、.watermark プロパティをカスタマイズできます。

変数とデフォルト

名前	デフォルト値	説明
--watermark-background		CSS の background プロパティ
--watermark-color		CSS background-color プロパティ
--watermark-image		CSS の background-image プロパティ
--watermark-position	右下	CSS の background-position プロパティ
--watermark-repeat	no-repeat	CSS background-repeat プロパティ
--watermark-size		CSS の background-size プロパティ

CSS テンプレート

cast-media-player {
  --watermark-background:
  --watermark-color:
  --watermark-image:
  --watermark-position:
  --watermark-repeat:
  --watermark-size:
}

再生、広告、その他の CSS プロパティ

cast-media-player セレクタから、広告、フォント、プレーヤー画像、その他のプロパティをカスタマイズすることもできます。

変数とデフォルト

名前	デフォルト値	説明
--ad-title	広告	広告のタイトル。
--skip-ad-title	広告をスキップ	[広告をスキップ] テキストボックスのテキスト。
--break-color	hsl(hue, 100%, 50%)	広告ブレークマークの色。
--font-family	Open Sans	メタデータと進行状況バーのフォントファミリー。
--spinner-image	デフォルトの画像	起動中に表示する画像。
--buffering-image	デフォルトの画像	バッファリング中に表示する画像。
--pause-image	デフォルトの画像	一時停止中に表示する画像。
--play-image		再生中にメタデータに表示する画像。
--theme-hue	42	プレーヤーに使用する色相。
--progress-color	hsl(hue, 95%, 60%)	進行状況バーの色。

CSS テンプレート

cast-media-player {
  --ad-title:
  --skip-ad-title:
  --break-color:
  --font-family:
  --spinner-image:
  --buffering-image:
  --pause-image:
  --play-image:
  --theme-hue:
  --progress-color:
}

詳細と追加の図については、スタイル付きメディアレシーバを参照してください。

オーバースキャン

TV 向けのレイアウトには、TV 規格の進化と、視聴者に常にフルスクリーン表示を提供したいというデベロッパー側の意図により、特殊な要件がいくつかあります。TV デバイスでは、フルスクリーン表示の際にディスプレイ全体を埋められるように、アプリのレイアウト周囲がクリッピングされる場合があります。この動作は、一般的にオーバースキャンと呼ばれます。レイアウトのすべての辺に 10% のマージンを組み込むことで、オーバースキャンによる画面要素のクリッピングを回避します。

デフォルトの音声 UI

MetadataType.MUSIC_TRACK

A. --logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtist、MusicTrackMediaMetadata.artist、または MusicTrackMediaMetadata.composer

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

H. 再生 / 一時停止

カスタム UI のデータバインディング

Cast Web Receiver SDK では、cast-media-player ではなく独自のカスタム UI 要素を使用できます。

カスタム UI データバインディングを使用すると、独自のカスタム UI 要素を使用し、PlayerDataBinder クラスを使用して、レシーバに cast-media-player 要素を追加する代わりに、UI をプレーヤーの状態にバインドできます。アプリがデータバインディングをサポートしていない場合、バインダはデータ変更のイベントの送信もサポートします。

const context = cast.framework.CastReceiverContext.getInstance();
const player = context.getPlayerManager();

const playerData = {};
const playerDataBinder = new cast.framework.ui.PlayerDataBinder(playerData);

// Update ui according to player state
playerDataBinder.addEventListener(
    cast.framework.ui.PlayerDataEventType.STATE_CHANGED,
    e => {
      switch (e.value) {
        case cast.framework.ui.State.LAUNCHING:
        case cast.framework.ui.State.IDLE:
          // Write your own event handling code
          break;
        case cast.framework.ui.State.LOADING:
          // Write your own event handling code
          break;
        case cast.framework.ui.State.BUFFERING:
          // Write your own event handling code
          break;
        case cast.framework.ui.State.PAUSED:
          // Write your own event handling code
          break;
        case cast.framework.ui.State.PLAYING:
          // Write your own event handling code
          break;
      }
    });
context.start();

ウェブレシーバーで使用できるように、HTML に少なくとも 1 つの MediaElement を追加する必要があります。複数の MediaElement オブジェクトが利用可能な場合は、Web レシーバで使用する MediaElement にタグを付ける必要があります。これを行うには、以下に示すように、動画のクラスリストに castMediaElement を追加します。そうしないと、ウェブレシーバは最初の MediaElement を選択します。

<video class="castMediaElement"></video>

Shaka プレーヤーの移行における HLS

スマートディスプレイ向けに最適化する

プレーヤーのスタイルを設定する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

Playback のロゴ

プレーヤーの背景プロパティ

変数とデフォルト

CSS テンプレート

ロゴのプロパティ

変数とデフォルト

CSS テンプレート

スプラッシュのプロパティ

変数とデフォルト

CSS テンプレート

スライドショー

変数とデフォルト

CSS テンプレート

透かしのプロパティ

変数とデフォルト

CSS テンプレート

再生、広告、その他の CSS プロパティ

変数とデフォルト

CSS テンプレート

オーバースキャン

デフォルトの音声 UI

MetadataType.MUSIC_TRACK

カスタム UI のデータ バインディング

プレーヤーのスタイルを設定する

カスタム UI のデータバインディング