> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.bannerify.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Render videos in JavaScript

> Render a video template as an MP4 and follow its progress with the JavaScript SDK.

A video template renders as an MP4. Each second of the video counts as one generation. [Generate videos](/docs/essentials/generate-videos) explains how to design one.

Both methods take a template id and an options object.

<ParamField body="templateId" type="string" required>
  The id of a video template, for example `tpl_xxx`.
</ParamField>

<ParamField body="modifications" type="Modification[]">
  The values to put into the template's layers. A video layer takes a `src`, and the modification named `music` changes the music. [Modifications](/docs/essentials/modifications) lists the fields each layer accepts.
</ParamField>

## Render and wait for the URL

`renderAndWaitVideo` returns `{ result }` with the URL of the MP4, or `{ error }`.

```ts theme={null}
const { result: url, error } = await bannerify.renderAndWaitVideo("tpl_xxx", {
  modifications: [
    { name: "headline", text: "Summer sale" },
    { name: "music", src: "https://example.com/song.mp3" },
  ],
})

if (error) throw new Error(error.message)

console.log(url)
```

## Follow the progress

`renderVideo` returns an async iterator of events. The last event is `done` or `error`.

```ts theme={null}
for await (const event of await bannerify.renderVideo("tpl_xxx", {
  modifications: [{ name: "headline", text: "Summer sale" }],
})) {
  if (event.type === "queued") console.log(`${event.ahead} videos before this one`)
  if (event.type === "progress") console.log(`${Math.round(event.progress * 100)}%`)
  if (event.type === "done") console.log(event.url)
  if (event.type === "error") console.error(event.error.message)
}
```

| Event | Fields |
| - | - |
| `queued` | `ahead`: the number of videos before this one |
| `progress` | `frame`, `totalFrames`, and `progress` from 0 to 1 |
| `done` | `url`: the URL of the MP4 |
| `error` | `error`: `code`, `message`, and `requestId` |

A refused request, such as an invalid API key or a used-up quota, gives one `error` event.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.