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

Web Receiver SDK には組み込みのプレーヤー UI が用意されており、この UI をカスタムの Web Receiver アプリに実装するには、HTML ファイルの本文に 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>

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

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

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

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

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

Web Receiver のディスプレイ:

カスタムの背景

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

変数とデフォルト

名前 デフォルト値 説明
--背景 Black CSS バックグラウンド プロパティ
--background-color CSS の背景色プロパティ
--background-image CSS の背景画像のプロパティ
--background-repeat 繰り返しなし CSS のバックグラウンド 繰り返しプロパティ
--background-size カバー CSS の背景サイズのプロパティ

CSS テンプレート

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

ロゴのプロパティ

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

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

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

Web Receiver のディスプレイ:

カスタム ロゴ

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

変数とデフォルト

名前 デフォルト値 説明
--logo-background CSS バックグラウンド プロパティ
--logo-color CSS の背景色プロパティ
--logo-image CSS の背景画像のプロパティ
--logo-repeat 繰り返しなし CSS のバックグラウンド 繰り返しプロパティ
--logo-size CSS の背景サイズのプロパティ

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');
}

Web Receiver のディスプレイ:

カスタム スプラッシュ

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

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

変数とデフォルト

名前 デフォルト値 説明
--splash-background CSS バックグラウンド プロパティ
--splash-color CSS の背景色プロパティ
--splash-image CSS の背景画像のプロパティ
--splash-repeat CSS のバックグラウンド 繰り返しプロパティ
--splash-size CSS の背景サイズのプロパティ

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 バックグラウンド プロパティ
--watermark-color CSS の背景色プロパティ
--watermark-image CSS の背景画像のプロパティ
--watermark-position 右下 CSS の background-position プロパティ
--watermark-repeat 繰り返しなし CSS のバックグラウンド 繰り返しプロパティ
--watermark-size CSS の背景サイズのプロパティ

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(色相, 100%, 50%) 広告ブレーク マークの色。
--font-family Open Sans メタデータと進行状況バーのフォント ファミリー。
--spinner-image デフォルトの画像 起動時に表示する画像。
--buffering-image デフォルトの画像 バッファリング中に表示する画像。
--pause-image デフォルトの画像 一時停止中に表示する画像。
--play-image 再生中にメタデータに表示する画像。
--theme-hue 42 プレーヤーに使用する hue
--progress-color hsl(色相, 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 デバイスでは、アプリ レイアウトの外端をクリップして、ディスプレイ全体を埋めることができます。この動作は一般にオーバースキャンと呼ばれます。 レイアウトの上下左右に 10% のマージンを設定して、オーバースキャンによって画面要素がクリップされないようにします。

デフォルトのオーディオ UI

MetadataType.MUSIC_TRACK

A. --logo-image

B. MusicTrackMediaMetadata.albumName

C. MusicTrackMediaMetadata.title

D. MusicTrackMediaMetadata.albumArtistMusicTrackMediaMetadata.artistMusicTrackMediaMetadata.composer のいずれか

E. MusicTrackMediaMetadata.images[0]

F. MediaStatus.currentTime

G. MediaInformation.duration

H.再生 / 一時停止

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

Cast Web Receiver SDK は、cast-media-player ではなく独自のカスタム UI 要素の使用をサポートしています。

カスタム UI データ バインディングを使用すると、cast-media-player 要素をレシーバーに追加する代わりに、独自のカスタム UI 要素を使用し、PlayerDataBinder クラスを使用して 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();

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

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