導覽

基本功能

生成影片Beta

了解如何設計短篇動畫影片範本,並透過 API 把它繪製成 MP4。

你可以在編輯器中設計一段短影片,並用你自己的文字、圖片和音訊,把它繪製成 MP4。這很適合短影音、限時動態、商品預告和社群廣告:動態效果維持不變,每次繪製時只更換內容。

影片範本目前為 Beta。編輯器、API 和 SDK 方法仍可能變更。

影片範本的運作方式

影片範本是帶有時間軸的範本。每個最上層的圖層在時間軸上都有開始和結束,每種動畫最多可以設定一個:

種類 功能 預設效果
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 在你選擇的時間點執行一次 Press, Count up

Text reveal、Typewriter 和 Count up 適用於文字圖層。Ken Burns 適用於圖片和影片圖層。

在文字圖層上,Enter 或 Exit 預設效果可以逐字或逐個字母依序做動畫,而不是讓整個圖層一起動。請把 Animate by 設為 Word 或 Letter,再設定 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。

設計影片

  1. 點選 New template,再點選 Blank video。編輯器會開啟 1080 × 1920 的畫布,以及 30 fps、5 秒長的時間軸。
  2. 像圖片範本一樣新增圖層:文字、圖片、形狀和框架。若要新增片段,請使用 Objects → Video,或把影片檔案拖放到畫布上。
  3. 拖曳時間軸上的長條,設定每個圖層的開始與結束。按住 Shift 可以讓邊緣對齊播放頭。
  4. 選取圖層,並開啟右側面板的 Motion 分頁。設定它的時間,然後選擇 Enter、Exit、Ambient 或 Behavior 預設效果及其緩動。將游標移到預設效果上,可以在選擇之前先在圖層上看到效果。Start after 可以讓某個圖層在另一個圖層結束時開始。
  5. 沒有選取圖層時,Motion 分頁可以設定長度(最長 60 秒)和影格率(24、25、30 或 60 fps)。你也可以在時間軸上輸入長度,或在尺標上拖曳影片的結尾。
  6. 按下播放來觀看影片。Play once、Loop 和 Ping-pong 可設定預覽在結尾時的行為。

新增音訊

把音訊檔案拖放到畫布或時間軸上,或點選 Motion 分頁中的 Add audio。每個檔案都會成為一條音訊軌,從播放頭的位置開始,或從你在時間軸上放下的位置開始,長度與檔案相同。

  • 拖曳音訊軌可以在時間上移動,拖曳它的邊緣則可以修剪。起點的邊緣也會修剪檔案,所以每段聲音都會保持在原來的時間點。
  • 點選音訊軌的喇叭圖示可以將它靜音。
  • 選取音訊軌,並按 Alt+K(Mac 上為 Option+K),即可在播放頭的位置分割它。按 Delete 可以移除。
  • 選取音訊軌後,右側面板可以設定它的名稱、檔案、音量、淡入和淡出、檔案的起點,以及是否循環。

影片圖層會播放它的片段所帶的聲音。Volume 和 Sound 設定位於圖層的 Playback 區段。

在時間軸上作業

  • 在目前時間或時間軸長度中輸入時間,格式可以是 0:01.50,也可以是秒數。
  • 用滑桿縮放時間軸,或按住 Ctrl 或 Cmd 並滾動滑鼠滾輪。在觸控板上則用雙指捏合。
  • 拖曳時間軸的上緣,可以讓它變高。
  • 點選圖層旁的箭頭,會為它的每個動畫顯示一條長條。拖曳 Enter 長條的結尾,或 Exit 長條的開頭,可以變更它的長度。拖曳 Behavior 長條可以移動它,拖曳它的邊緣則可以變更長度。Ambient 長條的長度涵蓋整個圖層。

影片和音訊檔案會上傳到你的工作區素材中,每個檔案最大 50 MB。

繪製影片

傳送 POST 請求到 /v1/templates/renderVideo,並帶上範本 ID 和你的 modification:

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,就能在繪製期間取得伺服器傳送事件:

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 是它的網址。
failed 繪製失敗。error 會說明原因。

加上 &stream=true,就能從最新的事件開始,再次取得這些事件。請不要重新傳送 renderVideo 請求:那會繪製第二支影片,也會再計一次。

SDK 會替你讀取這些事件,並在連線中斷時重新讀取影片。請見 JavaScript、PHP、Go 和 Python 的指南。

用量

影片每一秒計為一次生成,不足一秒以一秒計;60 fps 時則每一秒計為兩次生成。5 秒的影片計 5 次,7.5 秒的影片計 8 次,60 fps 的 5 秒影片則計 10 次。影片在 MP4 儲存時計算,即使連線在結束前就中斷也是如此。繪製失敗時不會計算。

限制

限制 值
輸出 MP4(H.264 影像、AAC 音訊)
長度 最長 60 秒
影格率 24、25、30 或 60 fps
上傳的影片或音訊檔案 最大 50 MB

瞭解更多