Background
Backgroundレスポンシブ対応コンポーネント(AlexaBackground
)は、コンテンツの背後にビデオ、画像、色を表示します。
alexa-layoutsパッケージを読み込む
AlexaBackground
を使用するには、alexa-layoutsパッケージを読み込みます。
alexa-layouts
パッケージの最新バージョンは1.5.0
です。AlexaBackground
はバージョン1.1.0
で導入されました。
AlexaBackgroundパラメーター
type
以外のパラメーターはすべてオプションです。
名前 | 型 | デフォルト | 説明 | 追加されたバージョン |
---|---|---|---|---|
|
文字列 |
|
背景画像または背景ビデオの配置を指定します。 |
1.1.0 |
|
ブール値 |
|
trueの場合、指定された背景画像にぼかしを入れて表示します。 |
1.1.0 |
|
なし |
背景色として使用する色です。 |
1.1.0 | |
|
文字列 |
なし |
背景画像ソースのURLです。 |
1.1.0 |
|
文字列 |
|
背景画像または背景ビデオのサイズを調整する方法を指定します。 |
1.1.0 |
|
なし |
背景ビデオのソースです。Videoコンポーネントの |
1.1.0 | |
|
ブール値 |
|
trueの場合、背景にレイヤーを適用して、画像やビデオ上のテキストを読みやすくします。 |
1.1.0 |
|
配列 |
[] |
このコンポーネントにバインドするentityデータの配列です。 |
1.2.0 |
|
ブール値 |
|
trueの場合、背景にグラデーションを適用します。 |
1.1.0 |
|
ブール値 |
|
trueの場合、背景にノイズフィルターを適用します。 |
1.1.0 |
|
文字列 |
なし |
常に |
1.1.0 |
|
文字列 |
|
ビデオを再生する際に流すオーディオトラックです。 |
1.1.0 |
|
ブール値 |
|
trueの場合、ドキュメントがデバイスに表示されるとビデオが自動的に再生されます。 |
1.1.0 |
背景ソースの優先順位
複数の背景ソース(ビデオ、画像、色)を指定できます。Alexaでは、この優先順位に基づいて表示する背景を選択します。
backgroundVideoSource
backgroundImageSource
backgroundColor
上記のいずれにも値を指定しない場合、デフォルトの背景が使用されます。
背景に対して他のコンポーネントを配置する
他のコンテンツの背後にviewport全体にわたって背景を表示するには、一番上のContainer
にまずAlexaBackground
レイアウトを最上位で配置し、Container
の高さと幅を100%
に設定します。
たとえば、次のContainer
には3つの項目があります。 AlexaBackground
、AlexaHeader
、Text
コンポーネントです。単色の濃い赤色の背景が画面全体に表示されます。ヘッダーテキストは背景の上部に表示され、テキスト文字列は画面のさらに下に表示されます。
AlexaBackgroundの例
次の例では、背景にビデオを表示します。デバイスがドキュメントをレンダリングすると、ビデオの再生が自動的に始まり、2回(repeatCount
)再生されます。(この例では、backgroundVideoSource
に仮の値を指定しています。実際に表示するビデオのURLに置き換えてください)。
{
"type": "AlexaBackground",
"backgroundVideoSource": [
{
"url": "https://example.com/fictitious-video-urls/background-video.mp4",
"repeatCount": 2
}
],
"videoAutoPlay": true,
"videoAudioTrack": "none"
}
次の例では、ビデオではなく画像を背景に表示します。
関連トピック
最終更新日: 2022 年 10 月 27 日