基本功能
生成影片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。
設計影片
- 點選 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 或 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 |