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-image
は body
セレクタからカスタマイズできます。
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-image
を welcome.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.albumArtist
、MusicTrackMediaMetadata.artist
、MusicTrackMediaMetadata.composer
のいずれか
E. MusicTrackMediaMetadata.images[0]
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>