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

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

Web Receiver SDK には組み込みのプレーヤー UI が用意されています。この UI をカスタムのウェブレシーバーアプリを作成するには、cast-media-player 要素を記述する必要があります。

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

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

次のセクションでは、メディアプレーヤーの各領域をカスタマイズする方法について説明します要素です。次のテンプレートをご利用になれます。

外部インライン

</ph>

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

</ph> で確認できます。

<!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 クラスとは別のものです。Google Chat では 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);
}

Web Receiver の画面:

カスタムの背景

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

変数とデフォルトCSS テンプレート

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

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

Web Receiver の画面:

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

変数とデフォルトCSS テンプレート

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

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 プロパティをカスタマイズできます。

変数とデフォルトCSS テンプレート

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

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

スライドショー

アイドル状態のときに最大 10 個のイメージが循環されるようにする（スプラッシュ画像の代わりに）次のスライドショーを使用してくださいあります。

変数とデフォルトCSS テンプレート

名前	デフォルト値	説明
--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 番目の画像。

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 プロパティをカスタマイズできます。

変数とデフォルトCSS テンプレート

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

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

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

また、広告、フォント、プレーヤー画像、その他のプロパティを cast-media-player セレクタ。

変数とデフォルトCSS テンプレート

名前	デフォルト値	説明
--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	プレーヤーに使用する hue。
--progress-color	hsl(色相, 95%, 60%)	進行状況バーの色。

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

詳細と説明については、スタイル付きメディアレシーバー。

オーバースキャン

テレビの進化により、テレビ向けのレイアウトには独自の要件がいくつかあります。常に全画面表示したいという要望に応えるのが一般的でしたテレビデバイスはアプリレイアウトの外端をクリップして、画面いっぱいに表示されます。この動作は、一般にオーバースキャンと呼ばれます。オーバースキャンによって画面要素が切り取られるのを防ぐために 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 では、カスタム UI 要素の cast-media-player。

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

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();

少なくとも 1 つ追加してください MediaElement を HTML に変換し、Web Receiver が使用できるようにします。MediaElement が複数ある場合使用したい場合は、ウェブで許可したい MediaElement にタグを付ける必要があります。使用するレシーバー。これを行うには、動画のクラスに castMediaElement を追加します。次のように指定します。そうでない場合は、Web Receiver は最初に MediaElement。

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

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

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

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

再生のロゴ

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

ロゴのプロパティ

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

スライドショー

透かしのプロパティ

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

オーバースキャン

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

MetadataType.MUSIC_TRACK

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

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