Turn any audio into video, stabilize any clip — all from one URL. Read the blog post →
Imgix APIs動画 APIブレンディング

ブレンディング

Standard render

Imgix Videoの有効化

Imgix Videoパラメータを有効にするには、fm をビデオ出力フォーマット（mp4、hls、または dash）に設定してください。

blend は、色または画像を映像の上に重ね、CSS ブレンドモードのいずれかで合成します。また、映像を切り抜くこともできます。画像の場合と同じ動作をするため、同じ URL が動画ソースでも画像ソースでも同じ結果を生成します。

?fm=mp4&blend=80000000&blend-mode=normal           # フレーム全体に 50% 黒のスクリム
?fm=mp4&blend=8000ff&blend-mode=multiply           # ブランドカラーのティント
?fm=mp4&blend=logo.png&blend-w=0.3&blend-align=bottom,right

レイヤーの重ね合わせ

レイヤーは最大 4 枚まで重ねられます。blend (または blend[0]) が最下層で、その上に blend[1] から blend[3] が重なります。このファミリのすべてのパラメータは同じ [N] サフィックスを受け付け、それぞれに blend64 のような base64 版もあります。レイヤーは色または画像を持つと描画されます。

?fm=mp4&blend=80000000&blend[1]=logo.png&blend-w[1]=0.2&blend-align[1]=top,right

ブレンドレイヤーにはタイムラインがありません。すべてのフレームに同じレイヤーが描画され、blend= に GIF や動画を指定しても最初のフレームのみが描画されます。

レイヤーが描画される出力

出力ブレンドモードカット (destination-out / -in)
動画からの静止画 (jpg、png、webp、avif、jxl などの画像 fm。フレームの指定には video-thumbnail を併用)対応対応
オーディオグラムの静止画対応対応
アニメーション (gif、awebp、aavif、apng、アニメーション jxl)対応非対応
MP4、WebM、オーディオグラムの動画対応非対応
HLS と DASH の全レンディション対応非対応
アセンブルされたクリップ (video-assembly) とプレビュー生成される出力に準じます生成される出力に準じます
スプライトシートとストーリーボード非対応非対応

カットには透明になれる映像が必要で、それが可能なのは静止画だけです。動画とアニメーションは不透明なため、カットは何も描画しません。レイヤーではなく動画フレームから形を切り抜くには、静止画を出力して mask を使用してください。

レイヤーの重なり順

ブレンドレイヤーはサイズ調整後の映像の上に置かれ、それ以外のすべての要素の下に来ます。gradient、fade、mask、画像ウォーターマーク、テキスト、波形、プログレスバー、ピクチャインピクチャ はすべてその上に描画されます。blend-color の multiply は映像をティントしますが、その上に置かれたロゴには影響しません。

動画では、Imgix Video 自身のグレーディング — video-eq、LUT、video-blur、video-sharpen、video-vfx — がブレンドレイヤーより先に実行されます。

レイヤー自体へのグラデーションとフェード

ブレンドレイヤーは独自のグラデーションやエッジフェードを持てます。これらはレイヤーのワープより前にレイヤー画像に適用され、gradient および fade と同じ文法を blend- で前置して使用します。

いずれもこのファミリの他のパラメータと同じ [N] レイヤーサフィックスを受け付けます。

レイヤーのグラデーションとフェードは常に透明に向かってフェードし、bg を使用することはありません。

向きとサイズ

レイヤー画像はブラウザが表示するのと同じく正しい向きで描画されます。JPEG、PNG、WebP、TIFF では EXIF の Orientation が反映され、ミラー値も含まれます。XMP と IPTC の向き情報は無視されます。HEIC と AVIF はコンテナの回転・ミラー情報に従い、それがなければ EXIF の Orientation を使用します。

映像が反転されると、レイヤーも一緒に反転します。マーク、テキスト、グラデーションは反転しません。

ストリーミングとフィル

HLS と DASH では、ラダーが分岐する前のベースパスでレイヤーが一度だけ描画されるため、すべてのレンディションが映像と一緒にスケールされたレイヤーを持ちます。ピクセル長は最上位レンディションのピクセルを基準とするため、下位レンディションではピクセル指定のサイズが小さく見えます。ラダー全体で比率を保つには、割合指定を使用してください。

fit=fill では、静止画のレイヤーはフィル部分を含むキャンバス全体を覆います。動画ではレイヤーは映像部分のみを覆い、その周囲のフィルには影響しません。これは動画のグラデーションと同じ挙動です。blend-align、blend-x、blend-y、割合指定のサイズはすべて映像を基準に計測されます。

トラブルシューティング

症状考えられる原因対処
レイヤーが表示されない画像の取得またはデコードに失敗した、blend-mode がどれにも一致しなかった、または出力がスプライトシートであるX-Imgix-Video-Operations レスポンスヘッダーを確認してください。レイヤーが実際に描画されると blend が含まれます。その上で URL とモードのつづりを確認してください
動画でカットが効かないカットは静止画でのみ描画されます静止画を生成するか、mask を使用してください
b= に URL を指定しても何も描画されないb は色専用のエイリアスですblend= と記述してください
レイヤー画像の色がおかしいsRGB 以外の ICC プロファイル (Adobe RGB、Display P3、Generic RGB) を持っており、sRGB として読み取られます画像を sRGB に変換してください
HLS の下位レンディションでピクセルサイズが小さく見える長さは最上位レンディションのピクセル基準です割合指定を使用してください
波形Y座標ブレンドレイヤー