技術筆記 / SaaS / 工具 / 軟體

深入淺出 Shotstack：將影片編輯化為程式碼，釋放無限創意

想像一下，您需要為一個電商網站的數千種商品、或是一個房地產網站的上百筆物件，各自生成一支獨特的短影片。手動製作不僅耗時，更是一場夢魘。這正是「影片自動化」大顯身手的時刻，而 Shotstack，就是為解決此類問題而生的開發者利器。

這篇文章將帶您深入了解 Shotstack 的核心理念，並透過一個實際範例，展示如何將影片編輯的過程完全「程式碼化」。

什麼是 Shotstack？核心理念：影片即程式碼 (Video as Code)

Shotstack 是一個雲端影片編輯 API。它最核心的設計哲學是「Video as Code」。

它不像傳統的影片剪輯軟體那樣有圖形介面，而是讓開發者透過撰寫 JSON 物件來描述影片的「一切」。從影片的長度、解析度，到時間軸上的每一個片段、文字、轉場和音訊，都由程式碼精準定義。

這意味著您可以將影片製作無縫整合到任何應用程式或自動化工作流程中，賦予您前所未有的彈性和控制力。

Shotstack 的三大核心元件：

  1. 時間軸 (Timeline): 這是影片的骨架，定義了影片的總長度、解析度、背景顏色以及最重要的「軌道」。

  2. 軌道 (Track): 如同 Photoshop 或 Figma 中的圖層，軌道讓您能將不同的元素（影片、圖片、文字）在垂直方向上堆疊起來。您可以擁有多個軌道，例如一個放主要影片，另一個放 Logo 浮水印。

  3. 片段 (Clip): 這是軌道上的基本單位，也就是您實際放置的內容。一個 Clip 可以是一段影片、一張圖片、一段文字，甚至是 HTML 動畫。您可以精準設定它在軌道上的開始時間和持續長度。

(圖片來源: Shotstack.io)

實戰演練：自動生成房地產介紹短片

讓我們來實作一個常見的商業需求：從一支長長的空拍機影片中，擷取精華片段，串接後配上物件地址和背景音樂，自動生成一支 15 秒的房地產介紹短片。

目標：

  1. 從一支 5 分鐘的空拍影片中，擷取 00:30-00:35 和 01:15-01:25 兩個片段。

  2. 將這兩個片段串接起來。

  3. 在影片上方疊加房地產地址文字。

  4. 加入一首背景音樂。

步驟 1: 準備素材 (Assets)

步驟 2: 組裝 Shotstack 的 JSON 請求

這是最關鍵的一步。我們將用 JSON 來描述整個編輯過程。

{
  "timeline": {
    "background": "#000000",
    "soundtrack": {
      "src": "https://example.com/background-music.mp3",
      "volume": 0.8
    },
    "tracks": [
      {
        "clips": [
          {
            "asset": {
              "type": "video",
              "src": "https://example.com/drone-footage.mp4",
              "trim": 30, // 從第 30 秒開始
              "length": 5   // 擷取 5 秒
            },
            "start": 0,    // 放在時間軸的第 0 秒
            "length": 5
          },
          {
            "asset": {
              "type": "video",
              "src": "https://example.com/drone-footage.mp4",
              "trim": 75, // 從第 75 秒開始
              "length": 10  // 擷取 10 秒
            },
            "start": 5,    // 緊接著上一個片段，放在第 5 秒
            "length": 10
          }
        ]
      },
      {
        "clips": [
          {
            "asset": {
              "type": "title",
              "text": "花蓮縣壽豐鄉大學路一段",
              "style": "minimal",
              "size": "small"
            },
            "start": 0,
            "length": 15,
            "position": "top"
          }
        ]
      }
    ]
  },
  "output": {
    "format": "mp4",
    "resolution": "hd"
  }
}

JSON 解說：

步驟 3: 發送請求與接收成果

將這個 JSON 物件透過 API POST 到 Shotstack 的 render 端點。Shotstack 會回傳一個 renderId。由於影片渲染需要時間，這是一個非同步操作。您可以稍後用 renderId 查詢狀態，或設定一個 Webhook，當影片渲染完成後，Shotstack 會自動通知您的伺服器並提供影片下載連結。

進階應用與整合

結論：何時該選擇 Shotstack？

Shotstack 是開發者的終極武器。如果您需要以下功能，它將是您的不二之選：

雖然它的學習曲線比範本驅動的工具要陡峭，但它所賦予的無限可能性，絕對能讓您的創意不受任何拘束。

在 GitHub 看原文