グラデーションオーバーレイとフェード

Imgix Video では、キャプション背後の暗いスクリム、ブランドカラーのウォッシュ、ビネット、単色にフェードするエッジなど、カラーグラデーションを動画に焼き込むことができます。グラデーションは配信されるピクセルの一部となるため、プレーヤー側で CSS を重ねる必要はありません。動画は Imgix の画像と同じ gradient および fade パラメータを同じ CSS ジオメトリで使用するため、1 つの URL が静止画でも動画でも同じように表示されます。

?fm=mp4&gradient=00000000,cc000000                      # 下部スクリム：透明から 80% の黒へ
?fm=mp4&gradient=ff0044cc,00000000&gradient-angle=90    # 左からのブランドウォッシュ
?fm=mp4&fade-bottom=0.3                                 # 下部 30% を黒へフェード

<video> 要素に重ねた CSS グラデーションはデバイスのネイティブ再生コントロールを覆ってしまい、動画を表示するすべてのプレーヤーやアプリで作り直す必要があります。焼き込まれたグラデーションはファイルと一緒にあらゆるプレーヤー、ソーシャル共有、ダウンロードに届き、明るい映像の上でもキャプションやローワーサードを読みやすく保ち、静止画と動画でブランド表現を一貫させます。

video-filter=darken はフレーム全体を均一に暗くし、video-vfx-vignette は固定の放射状の減光を適用します。グラデーションでは、フレームのどこを、どの方向に、どの色で暗くするかを選択できます。

レンダリングのトリガー。 これらのパラメータは単独ではレンダリングされません。fm=mp4、fm=hls、fm=gif、サムネイルなどの出力も指定してください。

カラーは AARRGGBB です。 Imgix の他の箇所と同様に、8 桁のカラーはアルファが先頭です。cc000000 は 80% の黒、ff0044cc は不透明な青です。00000000 は、後に続くカラーの桁にかかわらず完全に透明です。

合成順序。 グラデーションは、video-filter、LUT、VFX の後に、グレーディング済みの動画の上に合成されます。ピクチャーインピクチャー、ウォーターマーク、焼き込みテキスト、キャプション、プログレスバーはすべてその上に描画されるため、テキストはスクリムの上に配置され、スクリムによって暗くなりません：

グレーディング → VFX → グラデーション / フェード → ピクチャーインピクチャー → ウォーターマーク → テキストとキャプション → プログレスバー

パラメータ

グラデーション

フェード

ウォーターマークのグラデーションとフェード

長さは Imgix のリテラル規則に従います。. を 1 つだけ含む 0 から 1 の小数 (0.3 など) は比率、それ以外はピクセルです。つまり 1 は 1 ピクセル、1.0 は全幅です。

解析できない値は無視され、リクエストが失敗することはありません。有効なグラデーションやフェードが設定されていない場合、動画は変更されずにレンダリングされます。

各モードの描画内容

• カラーグラデーション (デフォルト)：ストップがそれぞれのアルファで映像の上に描画されます。透明から黒へのスクリムは片側を暗くし、不透明なウォッシュは全体に色を付け、gradient-alpha は効果全体を弱めます。
• グラデーションマスク (gradient-mask=true)：ストップが透明な部分で映像が bg にフェードします。gradient=ffffffff,00ffffff&gradient-mask=true&gradient-type=radial は中央を残してエッジを黒にフェードし、楕円形のビネットになります。
• エッジフェード (fade)：各エッジが bg へ線形にフェードします。

グラデーションとフェードは併用できます。画像と同様に、フェードはグラデーションの後に適用されます。

動画のマスクとフェードは透明ではなく色にフェードします。 動画出力にはアルファチャンネルがないため、画像なら透明になる部分に、動画では bg が表示されます。動画での bg のデフォルトは黒です。静止画では画像と同様に、不透明なフォーマットでは白、アルファを持つフォーマットでは透明がデフォルトです。静止画と動画を一致させる必要がある場合は、bg を明示的に指定してください。完全な一覧は bg をご覧ください。

他のパラメータとの関係

• fit=fill。 動画では、グラデーション、マスク、フェードは fill の背景ではなく映像部分を覆います。レターボックス付きの縦向き出力に下部スクリムを適用すると、その下の帯ではなく動画の下部が暗くなります。静止画では画像と同様に、fill を含むキャンバス全体を覆います。帯をなじませるには、fill-color をスクリムの終端色に合わせてください。
• mask=corners と mask=ellipse。 どちらかのマスクを指定した場合、単独の fade はマスクに属し、画像ではマスクのエッジをぼかします。動画ではマスクを描画しないため、この場合の単独の fade は何も描画せず、fade-left、fade-right、fade-top、fade-bottom のみがエッジをフェードします。これにより、1 つの URL が静止画と動画で一貫します。
• テキストグラデーション。 txt-gradient はテキスト自体を塗りつぶし、gradient はその背後にスクリムを描画します。gradient-angle と txt-gradient-angle は同じ CSS の規則に従います。

出力

グラデーションとフェードは、MP4/WebM、HLS/DASH、アニメーション GIF/WebP/AVIF/JXL/APNG、静止画サムネイル、オーディオグラム (キャンバスの上、波形の下)、プレビューリール、複数アセットのアセンブリに適用されます。

• HLS/DASH。 グラデーションはレンディションラダーの前に一度だけ描画されるため、すべてのレンディションに含まれます。ピクセル単位の長さ (fade-bottom=100、ピクセル単位の半径や中心など) は最上位のレンディションで測定され、小さいレンディションでは映像とともに縮小されます。どのフォーマットでも同じに見えるサイズにするには、比率 (fade-bottom=0.2 など) を使用してください。
• スプライトシートは、ウォーターマークと同様にグラデーションとフェードを無視します。スクリム付きのポスターにはサムネイル (fm=jpg&video-thumbnail=...) を使用してください。
• 音声のみの出力には描画する映像がありません。
• 8 ビット出力はディザリングされるため、平坦な空の上の長く暗いスクリムでも段階的なバンディングが発生しません。
• 動画からレンダリングされた静止画やアニメーションでは、画像の調整 (blur、hue、sat など) がグラデーション、フェード、ウォーターマーク、テキストの後に適用されます。Imgix の画像では、これらは前に適用されます。
• パフォーマンス。 グラデーションはリクエストごとに一度レンダリングされ、すべてのフレームに GPU で合成されます。gradient-mode=normal では静的なウォーターマークとほぼ同等のコストです。それ以外のブレンドモードはピクセル単位でブレンドされるため、コストが高くなります。

https://assets.imgix.net/videos/example_video-remove-audio.mp4?fm=hls&gradient=00000000,cc000000
https://assets.imgix.net/videos/example_video-remove-audio.mp4?fm=jpg&video-thumbnail=2&gradient=00000000,cc000000

HDR。 グラデーションは動画自体の信号で描画され、指定した色はリファレンスホワイト (203 nits) に配置されます。白のストップはディスプレイのピーク輝度ではなくペーパーホワイトとして表示され、黒のスクリムはどのフォーマットでも黒になります。デフォルトの video-tonemap 設定では、グラデーションは動画とともにトーンマッピングされるため、白のストップは動画自体のペーパーホワイトと同じ位置になります。video-tonemap=passthrough では出力は HDR のままで、グラデーションはリファレンスホワイトのままです。Dolby Vision プロファイル 5 のソースでは、無彩色のストップは無彩色のままですが、有彩色のストップは色がずれる場合があります。

ウォーターマークのグラデーションとフェード

同じパラメータに mark- を付けると、画像のウォーターマークに使用できます。mark-gradient とその mark-gradient-* 関連パラメータ、および mark-fade と mark-fade-left、mark-fade-right、mark-fade-top、mark-fade-bottom です。これらはウォーターマークのレイヤーインデックスに従います。mark-fade[1] は mark[1] に属し、レイヤーがインデックスなしの指定を引き継ぐことはありません。

• ウォーターマーク自体に、mark-w/mark-h と mark-alpha の後、配置される前に描画されます。長さはウォーターマーク自身のもので、サイズ調整後のウォーターマークのピクセル、またはその幅や高さに対する比率です。
• カラーグラデーションはウォーターマークの表示部分に色を付け、透明な部分は透明のままです。動画のグラデーションが gradient-mode でブレンドされるのと同様に、mark-gradient-mode でブレンドされます。
• ウォーターマークには bg がないため、mark-gradient-mask と mark-fade はウォーターマークを色ではなく常に透明にフェードします。
• アニメーション (GIF/APNG) のウォーターマークは、すべてのフレームでフェードします。

https://assets.imgix.net/videos/example_video-remove-audio.mp4?fm=mp4&mark=https%3A%2F%2Fassets.imgix.net%2Fpresskit%2Fimgix-presskit.pdf%3Fpage%3D3%26fm%3Dpng%26w%3D200&mark-w=200&mark-align=middle,center&mark-gradient=ffff0000,ff0000ff

トラブルシューティング