動画の生成 | Bannerify Docs

エディターで短い動画をデザインし、あなたのテキスト、画像、音声を使って MP4 として描画できます。動きは同じままで、描画のたびに内容を変えたい、リール、ストーリーズ、商品のティザー、ソーシャル広告に便利です。

動画テンプレートはベータ版です。エディター、API、SDK のメソッドは、今後変更される可能性があります。

動画テンプレートの仕組み

動画テンプレートは、タイムラインを持つテンプレートです。最上位のレイヤーにはそれぞれタイムライン上の開始と終了があり、種類ごとに最大 1 つのアニメーションを設定できます。

種類	内容	プリセット
Enter	レイヤーの開始時に、レイヤーを登場させます	Fade in, Slide in, Slide in up, Slide in down, Scale in, Pop, Rotate in, Flip in X, Flip in Y, Text reveal, Typewriter
Exit	レイヤーの終了時に、レイヤーを退場させます	Fade out, Slide out, Slide out up, Slide out down, Scale out, Rotate out, Flip out X, Flip out Y
Ambient	レイヤーが表示されている間ずっと動き続けます	Ken Burns, Pulse, Breathe, Float, Drift, Wiggle, Shake, Slow rotate
Behavior	選んだタイミングで 1 回だけ動きます	Press, Count up

Text reveal、Typewriter、Count up は、テキストレイヤー用です。Ken Burns は、画像レイヤーと動画レイヤー用です。

テキストレイヤーでは、Enter または Exit のプリセットで、レイヤー全体の代わりに、1 語ずつまたは 1 文字ずつ順番にアニメーションさせることもできます。Animate by を Word または Letter に設定し、Stagger を設定します。Stagger は、最初の語または文字の開始から、最後の語または文字の開始までの間に、アニメーションが占める割合です。0% では、すべてが同時に動きます。

動画には、音声トラック（音楽、ナレーション、効果音）や、音声つきでクリップを再生する動画レイヤーを追加することもできます。

各プリセットには、イージングがあります。Linear、Ease in、Ease out、Ease in and out、終点を少し通り過ぎるバックカーブ（Ease in back、Ease out back、Ease in and out back）、Hold、そしてスプリングの Gentle、Quick、Bouncy、Slow です。

動画をデザインする

New template をクリックし、Blank video をクリックします。エディターが、1080 × 1920 のキャンバスと、30 fps で 5 秒のタイムラインで開きます。
画像テンプレートと同じように、テキスト、画像、図形、フレームなどのレイヤーを追加します。クリップを追加するには、Objects → Video を使うか、動画ファイルをキャンバスにドロップします。
タイムライン上のバーをドラッグして、各レイヤーの開始と終了を設定します。Shift キーを押しながらドラッグすると、端が再生ヘッドにスナップします。
レイヤーを選択し、右パネルの Motion タブを開きます。タイミングを設定し、Enter、Exit、Ambient、Behavior のプリセットとイージングを選びます。プリセットにポインターを合わせると、選ぶ前にレイヤー上で確認できます。Start after を使うと、別のレイヤーが終わったときにレイヤーが始まります。
レイヤーを選択していないときは、Motion タブで、長さ（最大 60 秒）とフレームレート（24、25、30、60 fps）を設定します。タイムラインに長さを入力するか、ルーラー上で動画の終端をドラッグしても設定できます。
再生ボタンを押して、動画を確認します。Play once、Loop、Ping-pong で、プレビューが終端に来たときの動作を設定します。

音声を追加する

音声ファイルをキャンバスまたはタイムラインにドロップするか、Motion タブの Add audio をクリックします。各ファイルは音声トラックになり、再生ヘッドの位置、またはタイムラインでドロップした位置から始まり、ファイルの長さだけ続きます。

トラックをドラッグすると時間軸上で移動でき、端をドラッグするとトリミングできます。開始側の端はファイルもトリミングするため、各音は元のタイミングのままです。
トラックのスピーカーをクリックすると、ミュートされます。
トラックを選択して Alt+K（Mac では Option+K）を押すと、再生ヘッドの位置で分割できます。Delete を押すと、削除できます。
選択したトラックの右パネルでは、名前、ファイル、音量、フェードイン、フェードアウト、ファイルの開始位置、ループを設定できます。

動画レイヤーは、クリップの音声を再生します。Volume と Sound の設定は、レイヤーの Playback セクションにあります。

タイムラインで作業する

現在の時刻やタイムラインの長さに、0:01.50 の形式、または秒で時間を入力できます。
タイムラインは、スライダー、または Ctrl キー（Mac では Cmd キー）とマウスホイールでズームします。トラックパッドでは、ピンチ操作を使います。
タイムラインの上端をドラッグすると、高さを変更できます。
レイヤーの横の矢印をクリックすると、各アニメーションのバーが表示されます。Enter のバーの終端、または Exit のバーの始端をドラッグすると、長さを変更できます。Behavior のバーはドラッグで移動でき、端をドラッグして変更できます。Ambient のバーは、レイヤー全体にわたります。

動画ファイルと音声ファイルは、ワークスペースのアセットにアップロードされ、1 ファイルあたり最大 50 MB です。

動画を描画する

テンプレート ID と modification を付けて、/v1/templates/renderVideo に POST リクエストを送ります。

curl --request POST \
  --url https://api.bannerify.co/v1/templates/renderVideo \
  --header 'Content-Type: application/json' \
  --data '{
    "apiKey": "YOUR_API_KEY",
    "templateId": "tpl_xxx",
    "modifications": [
      { "name": "headline", "text": "Summer sale" },
      { "name": "photo", "src": "https://example.com/image.png" },
      { "name": "music", "src": "https://example.com/song.mp3" }
    ]
  }'

MP4 の準備ができた時点で、応答が返ります。id は動画を識別します。

{
  "id": "vid_0b3c1c1e5d6f4c529e0a8f6a4c0f2a11",
  "url": "https://images.bannerify.co/files/0b3c1c1e-5d6f-4c52-9e0a-8f6a4c0f2a11.mp4"
}

modification は、画像テンプレートと同じように動作します。そのうえで、次のことができます。

動画レイヤーの名前と src を指定した modification は、そのレイヤーのクリップを変更します。
音声トラックの名前と src を指定した modification は、そのトラックのファイルを変更します。トラックのタイミング、音量、フェードは保たれます。この例では、テンプレートに music という名前の音声トラックがあります。

進行状況を追う

描画には画像よりも時間がかかり、動画はレンダラーを待つ列に並ぶことがあります。?stream=true を付けると、描画中に Server-Sent Events を受け取れます。

curl --no-buffer --request POST \
  --url 'https://api.bannerify.co/v1/templates/renderVideo?stream=true' \
  --header 'Content-Type: application/json' \
  --data '{ "apiKey": "YOUR_API_KEY", "templateId": "tpl_xxx" }'

イベント	フィールド	タイミング
`created`	`id`	動画に ID が付きました。最初のイベントです。
`queued`	`ahead`	動画がレンダラーを待っています。`ahead` は、前にある動画の数です。
`progress`	`frame`, `totalFrames`, `progress`	フレームを描画しています。`progress` は 0 から 1 まで進みます。
`done`	`url`	MP4 が保存されました。最後のイベントです。
`error`	`error`	描画に失敗しました。最後のイベントです。`error` には、`code`、`message`、`requestId` があります。

待たずに動画を開始する

?wait=false を付けると、動画の ID がすぐに返ります。サーバーが描画の間ずっと接続を保てない場合に便利です。

curl --request POST \
  --url 'https://api.bannerify.co/v1/templates/renderVideo?wait=false' \
  --header 'Content-Type: application/json' \
  --data '{ "apiKey": "YOUR_API_KEY", "templateId": "tpl_xxx" }'

応答のステータスは 202 です。

{ "id": "vid_0b3c1c1e5d6f4c529e0a8f6a4c0f2a11", "status": "queued" }

そのあとは、次のセクションのように、ID で動画を読み取ります。

動画をもう一度読み取る

接続が切れても、動画は最後まで描画されます。created イベントの id を使って、もう一度読み取れます。

curl 'https://api.bannerify.co/v1/videos/vid_0b3c1c1e5d6f4c529e0a8f6a4c0f2a11?apiKey=YOUR_API_KEY'

{
  "id": "vid_0b3c1c1e5d6f4c529e0a8f6a4c0f2a11",
  "status": "done",
  "url": "https://images.bannerify.co/files/0b3c1c1e-5d6f-4c52-9e0a-8f6a4c0f2a11.mp4"
}

ステータス	意味
`queued`	動画がレンダラーを待っています。
`rendering`	フレームを描画しています。
`done`	MP4 が保存されました。`url` がその URL です。
`failed`	描画に失敗しました。`error` に理由が示されます。

&stream=true を付けると、最新のイベントから、イベントをもう一度受け取れます。renderVideo のリクエストを再送しないでください。2 本目の動画を描画し、生成として数えてしまいます。

SDK は、これらのイベントを代わりに読み取り、接続が切れたときは動画を読み取り直します。JavaScript、PHP、Go、Python のガイドを参照してください。

使用量

動画 1 秒につき、1 回の生成として数えられ（切り上げ）、60 fps では 2 回として数えられます。5 秒の動画は 5 回、7.5 秒の動画は 8 回、60 fps の 5 秒の動画は 10 回です。動画は、MP4 が保存された時点で数えられ、終了前に接続が切れた場合も同様です。描画に失敗した場合は、何も数えられません。

制限

制限	値
出力	MP4（H.264 ビデオ、AAC オーディオ）
長さ	最大 60 秒
フレームレート	24、25、30、60 fps
アップロードする動画または音声ファイル	最大 50 MB

動画の生成Beta