Captions and timers

Subtitles in a video timeline

Every line of a narration in one clip, timed to the words, styled once.

Shown on A narration over a city skyline at night

After · rendered from the request below
Transcript

High above the city, on a tall column, stood the statue of the Happy Prince. He was gilded all over with thin leaves of fine gold.

The entry

Use it as a clip's asset, on a track above the footage.

{
  "asset": {
    "type": "subtitles",
    "cues": [
      {
        "start": 0.1,
        "end": 3.4,
        "text": "High above the city, on a tall column,"
      },
      {
        "start": 3.4,
        "end": 6.1,
        "text": "stood the statue of the Happy Prince."
      },
      {
        "start": 6.1,
        "end": 10.1,
        "text": "He was gilded all over with thin leaves of fine gold."
      }
    ],
    "style": {
      "font": "Inter",
      "size": 40,
      "weight": 700,
      "color": "#FFFFFF",
      "stroke": {
        "color": "#0B0F0D",
        "width": 5
      },
      "shadow": {}
    }
  },
  "transform": {
    "position": {
      "x": "50%",
      "y": "78%"
    }
  },
  "start": 0
}

Every setting and default is in the docs

Run it

The whole request behind the render above. Paste it as it is, or swap the file for your own.

job.ts
import { createClient, outputUrl } from "@rendobar/sdk";


const rb = createClient({ apiKey: process.env.RENDOBAR_API_KEY });


const job = await rb.jobs.run({
  type: "compose",
  params: {
    schemaVersion: 1,
    output: {
      format: "mp4",
      resolution: {
        width: 960,
        height: 540
      }
    },
    timeline: {
      tracks: [
        {
          clips: [
            {
              asset: {
                type: "video",
                src: "https://cdn.rendobar.com/compose/showcase/media/narrated.mp4"
              },
              start: 0
            }
          ]
        },
        {
          clips: [
            {
              asset: {
                type: "subtitles",
                cues: [
                  {
                    start: 0.1,
                    end: 3.4,
                    text: "High above the city, on a tall column,"
                  },
                  {
                    start: 3.4,
                    end: 6.1,
                    text: "stood the statue of the Happy Prince."
                  },
                  {
                    start: 6.1,
                    end: 10.1,
                    text: "He was gilded all over with thin leaves of fine gold."
                  }
                ],
                style: {
                  font: "Inter",
                  size: 40,
                  weight: 700,
                  color: "#FFFFFF",
                  stroke: {
                    color: "#0B0F0D",
                    width: 5
                  },
                  shadow: {}
                }
              },
              transform: {
                position: {
                  x: "50%",
                  y: "78%"
                }
              },
              start: 0
            }
          ]
        }
      ]
    }
  },
});


console.log(outputUrl(job));

Install with npm i @rendobar/sdk. jobs.run() submits and waits, so it returns the finished job in one call.

terminal
curl https://api.rendobar.com/jobs \
  -H "Authorization: Bearer $RENDOBAR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"type":"compose","params":{"schemaVersion":1,"output":{"format":"mp4","resolution":{"width":960,"height":540}},"timeline":{"tracks":[{"clips":[{"asset":{"type":"video","src":"https://cdn.rendobar.com/compose/showcase/media/narrated.mp4"},"start":0}]},{"clips":[{"asset":{"type":"subtitles","cues":[{"start":0.1,"end":3.4,"text":"High above the city, on a tall column,"},{"start":3.4,"end":6.1,"text":"stood the statue of the Happy Prince."},{"start":6.1,"end":10.1,"text":"He was gilded all over with thin leaves of fine gold."}],"style":{"font":"Inter","size":40,"weight":700,"color":"#FFFFFF","stroke":{"color":"#0B0F0D","width":5},"shadow":{}}},"transform":{"position":{"x":"50%","y":"78%"}},"start":0}]}]}}}'

Returns immediately with a job id. Poll GET /jobs/{id} or register a webhook rather than blocking on the request.

Questions

What does the subtitles clip do in compose?

Every line of a narration in one clip, timed to the words, styled once.

How do I add subtitles to a video with an API?

Send a compose job to the Rendobar API with this entry in the timeline: {"asset":{"type":"subtitles","cues":[{"start":0.1,"end":3.4,"text":"High above the city, on a tall column,"},{"start":3.4,"end":6.1,"text":"stood the statue of the Happy Prince."},{"start":6.1,"end":10.1,"text":"He was gilded all over with thin leaves of fine gold."}],"style":{"font":"Inter","size":40,"weight":700,"color":"#FFFFFF","stroke":{"color":"#0B0F0D","width":5},"shadow":{}}},"transform":{"position":{"x":"50%","y":"78%"}},"start":0}. Use it as a clip's asset, on a track above the footage. The request on this page is complete and renders as shown.

Footage and sound

More features

Timer A running countdown over the clip. It counts down from the clip's own length, so a 6 second clip starts at 6. Color A warm cinematic grade: the light pulled towards gold, contrast and color lifted a little, skin left believable. LUT A film grade from a LUT file: shadows toward teal, skin and highlights toward orange, the look a colourist hands over as a .cube. Looks The whole archive look in one word: sepia, grain, dust, scratches, projector flicker and a vignette together. Blur Knock the footage back so a title over it stays readable. Sharpen Crisp up footage that is slightly out of focus. Look at the jacket, the hair and the stone.

See all 117 features →