Editframe

https://editframe.com/docs
Admin
Editframe is a developer platform offering a comprehensive suite of tools for incorporating video...
Tokens:47,309
Snippets:305
Trust Score:8.2
Update:11 months ago
Show doc for...
Tokens:
Raw
### Web Component Layering Multiple Audio Tracks with Editframe

Source: https://editframe.com/docs/elements/examples/multi-track

Demonstrates layering multiple audio sources within a composition using Editframe Web Components. This example includes background music and a sound effect with specified start and end times, showing how to control audio playback segments.

```html
<ef-timegroup mode="contain" class="w-[1920px] h-[1080px]">
  <ef-video src="/video.mp4" mute></ef-video>
  
  <!-- Background music -->
  <ef-audio src="/music.mp3"></ef-audio>
  
  <!-- Sound effects that start at specific times -->
  <ef-timegroup mode="fixed" duration="0s" class="invisible">
    <!-- Delay the sound effect -->
  </ef-timegroup>
  <ef-audio src="/sound-effect.mp3" sourcein="0s" sourceout="2s"></ef-audio>
</ef-timegroup>
```

--------------------------------

### Install Editframe Packages for Next.js

Source: https://editframe.com/docs/editor-ui/preview

Installs the necessary Editframe API and React packages for your Next.js application. Ensure you are using the beta versions as specified.

```bash
npm install @editframe/api@beta @editframe/react@beta
```

--------------------------------

### Simple Video Player Example

Source: https://editframe.com/docs/react/components

Provides a comprehensive example of building a simple video player using various Editframe React components, including Preview, Timegroup, Video, TogglePlay, and Scrubber. This showcases how different components can be composed to create interactive UI elements.

```javascript
import { Preview, Timegroup, Video, TogglePlay, Scrubber } from '@editframe/react';

export function SimplePlayer() {
  return (
    <Preview>
      <Timegroup mode="contain" className="w-[1920px] h-[1080px] bg-black">
        <Video src="/video.mp4" className="w-full h-full object-contain" />
      </Timegroup>
      
      <div className="controls">
        <TogglePlay>
          <button slot="play">Play</button>
          <button slot="pause">Pause</button>
        </TogglePlay>
        <Scrubber />
      </div>
    </Preview>
  );
}

```

--------------------------------

### Synchronize Multiple Videos in Parallel Playback

Source: https://editframe.com/docs/elements/examples/multi-track

Demonstrates playing multiple videos simultaneously on different tracks. Uses the 'contain' mode for timegroups to ensure all videos start and play in parallel within a grid layout.

```html
<ef-timegroup mode="contain" class="w-[1920px] h-[1080px] bg-black grid grid-rows-2 grid-cols-2 gap-4 p-4">
  <!-- All videos start at the same time and play in parallel -->
  <ef-video src="/video1.mp4" class="w-full h-full object-cover rounded"></ef-video>
  <ef-video src="/video2.mp4" class="w-full h-full object-cover rounded"></ef-video>
  <ef-video src="/video3.mp4" class="w-full h-full object-cover rounded"></ef-video>
  <ef-video src="/video4.mp4" class="w-full h-full object-cover rounded"></ef-video>
</ef-timegroup>
```

--------------------------------

### Custom Styled Scrubber Example

Source: https://editframe.com/docs/controls/scrubber

Provides a complete example of a custom-styled ef-scrubber using both CSS custom properties and CSS parts for comprehensive visual control, including rounded corners and a distinct handle style.

```html
<style>
  .custom-scrubber {
    --ef-scrubber-height: 8px;
    --ef-scrubber-background: #1f2937;
    --ef-scrubber-progress-color: #10b981;
    --ef-scrubber-handle-size: 18px;
    width: 100%;
  }
  
  .custom-scrubber::part(scrubber) {
    border-radius: 8px;
  }
  
  .custom-scrubber::part(handle) {
    border: 3px solid white;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  }
</style>

<ef-scrubber class="custom-scrubber"></ef-scrubber>
```

--------------------------------

### Editframe Environment-Specific Setup (JavaScript/TypeScript)

Source: https://editframe.com/docs/editor-ui/configuration

Provides a JavaScript/TypeScript example demonstrating how to dynamically set Editframe configuration based on the environment (development or production) using conditional logic.

```javascript
const config = {
  development: {
    apiHost: 'http://localhost:3000',
    mediaEngine: 'local' as const,
  },
  production: {
    apiHost: 'https://api.editframe.com',
    mediaEngine: 'cloud' as const,
  },
};

const env = process.env.NODE_ENV === 'production' ? 'production' : 'development';

// In your component:
<ef-configuration 
  api-host={config[env].apiHost}
  media-engine={config[env].mediaEngine}
>
  {/* Your app */}
</ef-configuration>
```

--------------------------------

### Scrubber with Time Labels

Source: https://editframe.com/docs/controls/scrubber

An example of integrating an ef-scrubber with accompanying text labels to display time information (start, current, end). This provides context for the scrubber's position.

```html
<div className="scrubber-container">
  <div className="flex justify-between text-xs text-gray-600 mb-1">
    <span>0:00</span>
    <span>Current Time</span>
    <span>2:30</span>
  </div>
  <ef-scrubber></ef-scrubber>
</div>
```

--------------------------------

### Apply Visual Effects with CSS Mix Blend Modes

Source: https://editframe.com/docs/elements/examples/multi-track

Provides examples of CSS 'mix-blend-mode' properties that can be applied to elements to create various visual blending effects between layers.

```css
.overlay-video {
  mix-blend-mode: screen;    /* Lighten */
  mix-blend-mode: multiply;  /* Darken */
  mix-blend-mode: overlay;   /* Contrast */
  mix-blend-mode: soft-light; /* Gentle blend */
}
```

--------------------------------

### Basic <ef-audio> Usage within <ef-timegroup>

Source: https://editframe.com/docs/elements/audio

Demonstrates the fundamental implementation of the <ef-audio> custom element nested within an <ef-timegroup> container. This setup is used to manage and display audio assets within the Editframe timeline. The example showcases setting a source URL and includes a placeholder paragraph for additional content.

```html
<ef-timegroup
mode="contain"
class="aspect-[1/1] w-[500px] h-
[500px] bg-black flex items-center 
justify-center"
>
<ef-audio
src="https://assets.editframe.com/
card-joker.mp3"
id="sample-audio"
>
</ef-audio>
<p class="text-white text-2xl">
[intentionally left blank]
</p>
</ef-timegroup>
```

```jsx
<EfTimegroup
mode="contain"
className="aspect-[1/1] w-[500px] h-
[500px] bg-black flex items-center 
justify-center"
>
<EfAudio
src="https://assets.editframe.com/
card-joker.mp3"
id="sample-audio"
>
</EfAudio>
<p className="text-white text-2xl">
[intentionally left blank]
</p>
</EfTimegroup>
```

--------------------------------

### Video Editor Setup with Editframe React

Source: https://editframe.com/docs/react/components

Demonstrates how to set up a basic video editor using Editframe React components. It includes configuration, workbench setup, timegroup for video sequences, and timeline elements like play/pause controls, scrubber, and filmstrip. This requires the '@editframe/react' library.

```javascript
import {
  Configuration,
  Workbench,
  Timegroup,
  Video,
  Filmstrip,
  TogglePlay,
  Scrubber,
  TimeDisplay
} from '@editframe/react';

export function VideoEditor() {
  return (
    <Configuration apiHost="https://api.editframe.com">
      <Workbench>
        <Timegroup slot="canvas" mode="sequence" className="w-[1920px] h-[1080px]">
          <Video src="/clip1.mp4" />
          <Video src="/clip2.mp4" />
          <Video src="/clip3.mp4" />
        </Timegroup>

        <div slot="timeline" className="p-4">
          <div className="flex items-center gap-4 mb-4">
            <TogglePlay>
              <button slot="play">▶</button>
              <button slot="pause">⏸</button>
            </TogglePlay>
            <Scrubber className="flex-1" />
            <TimeDisplay />
          </div>
          <Filmstrip />
        </div>
      </Workbench>
    </Configuration>
  );
}
```

--------------------------------

### Editframe Basic Configuration Example

Source: https://editframe.com/docs/editor-ui/configuration

Demonstrates the fundamental usage of the `<ef-configuration>` element to set the API host and includes child Editframe components like `<ef-workbench>` and `<ef-video>`.

```html
<ef-configuration api-host="https://api.editframe.com">
  <ef-workbench>
    <ef-timegroup slot="canvas" mode="contain" className="w-[1920px] h-[1080px]">
      <ef-video assetId="123..."></ef-video>
    </ef-timegroup>
  </ef-workbench>
</ef-configuration>
```

--------------------------------

### Simple Video Player with Controls (HTML)

Source: https://editframe.com/docs/editor-ui/preview-element

A practical example of using ef-preview to create a simple video player with bottom-aligned controls, including a scrubber and time display. This setup uses Tailwind CSS for styling.

```html
<ef-preview>
  <ef-timegroup mode="contain" class="w-[1920px] h-[1080px] bg-black">
    <ef-video src="/video.mp4" class="w-full h-full object-contain"></ef-video>
  </ef-timegroup>
  
  <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black">
    <ef-scrubber class="mb-2"></ef-scrubber>
    <div class="flex items-center gap-4">
      <ef-toggle-play>
        <button class="text-white" slot="play">▶</button>
        <button class="text-white" slot="pause">⏸</button>
      </ef-toggle-play>
      <ef-time-display class="text-white"></ef-time-display>
    </div>
  </div>
</ef-preview>
```

--------------------------------

### Trim Video Start and End with Editframe

Source: https://editframe.com/docs/elements/video

Shows how to trim the beginning and end of a video using the `trimstart` and `trimend` attributes on the ef-video component. These attributes define cuts relative to the video's start and end.

```html
<ef-timegroup
mode="contain"
class="w-[720px] h-[480px] flex 
items-center justify-center bg-black 
overflow-hidden"
>
<ef-video
src="https://assets.editframe.com/
bars-n-tone.mp4"
trimstart="2s"
trimend="2s"
class="size-full object-contain"
>
</ef-video>
</ef-timegroup>
```

--------------------------------

### Build Basic Video Editor UI with Editframe Elements

Source: https://editframe.com/docs/editor-ui

This example demonstrates how to combine various Editframe HTML elements to construct a foundational video editor interface. It includes configuration, a workbench with a video canvas, and a timeline with playback controls. No external JavaScript is required for this basic setup.

```html
<ef-configuration api-host="https://api.editframe.com">
  <ef-workbench>
    <!-- Canvas area with your video content -->
    <ef-timegroup slot="canvas" mode="sequence" className="w-[1920px] h-[1080px]">
      <ef-video src="/video.mp4"></ef-video>
    </ef-timegroup>
    
    <!-- Timeline area with controls -->
    <div slot="timeline" className="flex flex-col gap-4 p-4">
      <div className="flex items-center gap-4">
        <ef-toggle-play>
          <button slot="play">▶ Play</button>
          <button slot="pause">⏸ Pause</button>
        </ef-toggle-play>
        <ef-scrubber className="flex-1"></ef-scrubber>
        <ef-time-display></ef-time-display>
        <ef-toggle-loop>
          <button>🔁 Loop</button>
        </ef-toggle-loop>
      </div>
      <ef-filmstrip></ef-filmstrip>
    </div>
  </ef-workbench>
</ef-configuration>
```

--------------------------------

### Install Editframe React Package

Source: https://editframe.com/docs/react

Install the Editframe React package using npm. This package provides all necessary components for building video editing applications in React.

```bash
npm install @editframe/react
```

--------------------------------

### Editframe Production Configuration

Source: https://editframe.com/docs/editor-ui/configuration

An example of configuring Editframe for a production environment, specifying the production API host and the cloud media engine.

```html
<ef-configuration 
  api-host="https://api.editframe.com"
  media-engine="cloud"
>
  <!-- Your editor UI -->
</ef-configuration>
```

--------------------------------

### HTML/JSX Example: Basic Play/Pause Toggle

Source: https://editframe.com/docs/controls/toggle-play

This example demonstrates the basic usage of the `<ef-toggle-play>` element. It displays a video and provides distinct play and pause buttons that control the video's playback. The buttons are styled and placed absolutely at the bottom of the video container.

```html
<ef-video
loop
id="toggle-play-demo"
src="https://assets.editframe.com/
bars-n-tone.mp4"
sourceout="2s"
class="w-full h-full object-contain"
>
</ef-video>
<ef-toggle-play
target="toggle-play-demo"
class="absolute bottom-0 left-0 
right-0 p-3 bg-gray-900 flex 
items-center justify-center gap-2"
>
<button
slot="play"
class="size-12 rounded-full 
bg-blue-600 text-white 
hover:scale-110 transition-all 
grid place-items-center"
>
▶
</button>
<button
slot="pause"
class="size-12 rounded-full 
bg-orange-600 text-white 
hover:scale-110 transition-all 
grid place-items-center"
>
⏸
</button>
</ef-toggle-play>
```

--------------------------------

### HTML Example: Targeting a Temporal Element

Source: https://editframe.com/docs/controls/toggle-play

This example shows how to use the `target` attribute to link the `<ef-toggle-play>` control to a specific temporal element, identified by its ID. This allows the control to be placed anywhere on the page, independent of the element it manipulates, such as a video within an `<ef-preview>` component.

```html
<ef-preview id="my-video">
  <ef-timegroup slot="canvas" mode="contain" className="w-[1920px] h-[1080px]">
    <ef-video src="/video.mp4"></ef-video>
  </ef-timegroup>
</ef-preview>

<!-- Control placed outside the preview -->
<ef-toggle-play target="my-video">
  <button slot="play">Play</button>
  <button slot="pause">Pause</button>
</ef-toggle-play>
```

--------------------------------

### Editframe Testing with Mock API

Source: https://editframe.com/docs/editor-ui/configuration

An example showing how to configure Editframe to use a mock API host during testing, facilitating isolated testing of the editor against mock data.

```html
<ef-configuration api-host="http://localhost:3001/mock-api">
  <!-- Test your editor against mock data -->
</ef-configuration>
```

--------------------------------

### GET /api/v1/renders/md5/:md5

Source: https://editframe.com/docs/resources

Looks up a render job by its MD5 hash.

```APIDOC
## GET /api/v1/renders/md5/:md5

### Description
Looks up a render job by its MD5 hash.

### Method
GET

### Endpoint
/api/v1/renders/md5/:md5

### Parameters
#### Path Parameters
- **md5** (string) - Required - The MD5 hash of the render to look up.

### Response
#### Success Response (200)
- **id** (string) - The unique identifier for the render job.
- **md5** (string | null) - The MD5 hash of the rendered output, if available.
- **metadata** (Record<string, string>) - Metadata associated with the render.
- **status** (string) - The current status of the render job.

#### Response Example
```json
{
  "id": "render_123abc",
  "md5": "abcdef1234567890abcdef1234567890",
  "metadata": {},
  "status": "completed"
}
```
```

--------------------------------

### Styling ef-preview Component

Source: https://editframe.com/docs/editor-ui/preview-element

Provides CSS examples for styling the ef-preview component, including setting its display, position, dimensions, and margins. It also shows how to override the default cursor.

```css
ef-preview {
  display: block;
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}
```

```css
ef-preview {
  cursor: default;
}
```

--------------------------------

### ef-toggle-loop with Simple Button

Source: https://editframe.com/docs/controls/toggle-loop

Shows a straightforward implementation of ef-toggle-loop using a basic button. This example highlights the minimal markup required to add loop functionality to a video player.

```html
<ef-toggle-loop>
  <button className="p-2 rounded bg-gray-500 text-white hover:bg-gray-600">
    🔁 Toggle Loop
  </button>
</ef-toggle-loop>
```

--------------------------------

### Video Editor Interface Example

Source: https://editframe.com/docs/react

Illustrates the structure of a video editor using Editframe's Configuration, Workbench, Timegroup, Video, Filmstrip, and control components.

```jsx
import { 
  Configuration,
  Workbench,
  Timegroup,
  Video,
  Filmstrip,
  TogglePlay,
  Scrubber
} from '@editframe/react';

export function VideoEditor() {
  return (
    <Configuration apiHost="https://api.editframe.com">
      <Workbench>
        <Timegroup slot="canvas" mode="sequence" className="w-[1920px] h-[1080px]">
          <Video src="/clip1.mp4" />
          <Video src="/clip2.mp4" />
        </Timegroup>
        
        <div slot="timeline">
          <div className="controls">
            <TogglePlay>
              <button slot="play">▶</button>
              <button slot="pause">⏸</button>
            </TogglePlay>
            <Scrubber />
          </div>
          <Filmstrip />
        </div>
      </Workbench>
    </Configuration>
  );
}
```

--------------------------------

### Basic Surface Usage in HTML

Source: https://editframe.com/docs/elements/surface

Demonstrates the fundamental implementation of an Editframe surface element in HTML. This setup displays content from a target video element, serving as a more resource-efficient alternative to duplicate video elements for synchronized playback.

```html
<ef-surface target="my-video-id"></ef-surface>
<ef-video id="my-video-id" src="path/to/video.mp4"></ef-video>
```

--------------------------------

### HTML Example: Play Slot Content

Source: https://editframe.com/docs/controls/toggle-play

This snippet illustrates the content that can be placed within the `play` slot of the `<ef-toggle-play>` component. It shows a button with a play icon and text, which will be displayed when the video is paused and will initiate playback when clicked.

```html
<ef-toggle-play>
  <button slot="play">
    <svg><!-- play icon --></svg>
    Play Video
  </button>
</ef-toggle-play>
```

--------------------------------

### Nested Timegroups for Layout with Editframe

Source: https://editframe.com/docs/elements/video

Illustrates using nested ef-timegroup elements to organize content, allowing one timegroup to act as a layout container for others. This example combines videos and text labels with positioning for complex arrangements.

```html
<ef-timegroup
mode="sequence"
class="w-[720px] h-[480px] flex 
items-center justify-center bg-black 
overflow-hidden"
>
<ef-timegroup class="flex flex-col 
items-center justify-center">
<ef-video
src="https://assets.editframe.
com/bars-n-tone.mp4"
sourcein="0s"
sourceout="2s"
class="z-0 absolute top-0 left-0 
size-full object-contain"
>
</ef-video>
<h1 class="relative bg-blue-500 
text-4xl p-2 text-white">
First in sequence
</h1>
</ef-timegroup>
<ef-timegroup class="flex flex-col 
items-center justify-center">
<ef-video
src="https://assets.editframe.
com/bars-n-tone.mp4"
sourcein="8s"
class="z-0 absolute top-0 left-0 
size-full object-contain"
>
</ef-video>
<h1 class="relative bg-blue-500 
text-4xl p-2 text-white">
Second in sequence
</h1>
</ef-timegroup>
</ef-timegroup>
```

--------------------------------

### Control Editframe Preview Playback with Props

Source: https://editframe.com/docs/editor-ui/preview

Demonstrates how to control the playback of an Editframe preview component using 'playing' and 'loop' props. These props enable or disable continuous playback and looping functionality.

```jsx
<Preview playing loop>
</Preview>
```

--------------------------------

### Multiple Editframe Scrubbers

Source: https://editframe.com/docs/controls/scrubber

Demonstrates how to configure multiple Editframe scrubbers to control the same video element. This setup allows for a primary scrubber and secondary scrubbers, such as a mini-scrubber, all linked to a central video preview via the 'target' attribute.

```html
<ef-preview id="main-preview">
  <ef-timegroup slot="canvas" mode="contain" className="w-[1920px] h-[1080px]">
    <ef-video src="/video.mp4"></ef-video>
  </ef-timegroup>
  
  <div slot="controls">
    <!-- Main scrubber -->
    <ef-scrubber></ef-scrubber>
  </div>
</ef-preview>

<!-- Secondary scrubber in a different location -->
<ef-controls target="main-preview">
  <ef-scrubber className="mini-scrubber"></ef-scrubber>
</ef-controls>
```

--------------------------------

### Create and Use Editframe API Client (TypeScript)

Source: https://editframe.com/docs/rendering/api

This snippet demonstrates how to import necessary functions from the Editframe API, initialize a client with an API token, and prepare for bundling a render job.

```typescript
import * as api from '@editframe/api';
import { bundleRender } from '@editframe/api/bundleRender';

const EF_TOKEN = "/* Load your API token from a secure location */";
const client = new api.Client(EF_TOKEN);
```

--------------------------------

### Create Video Sequence with Editframe

Source: https://editframe.com/docs/elements/video

Demonstrates how to play multiple videos sequentially using an ef-timegroup with `mode="sequence"`. Each ef-video can have its `sourcein` and `sourceout` attributes respected to define its segment within the sequence.

```html
<ef-timegroup
mode="sequence"
class="w-[720px] h-[480px] flex 
items-center justify-center bg-black 
overflow-hidden"
>
<ef-video
src="https://assets.editframe.com/
bars-n-tone.mp4"
sourcein="0s"
sourceout="2s"
class="size-full object-contain"
>
</ef-video>
<ef-video
src="https://assets.editframe.com/
bars-n-tone.mp4"
sourcein="8s"
class="size-full object-contain"
>
</ef-video>
<ef-video
src="https://assets.editframe.com/
bars-n-tone.mp4"
sourcein="2s"
sourceout="4s"
class="size-full object-contain"
>
</ef-video>
</ef-timegroup>
```

--------------------------------

### ef-toggle-loop in Editor Settings

Source: https://editframe.com/docs/controls/toggle-loop

Illustrates integrating ef-toggle-loop into an editor's settings panel. This example shows a basic setup for controlling video loop playback as part of a broader set of playback options within an editing interface.

```html
<div className="settings-panel">
  <h3>Playback Settings</h3>
  <ef-toggle-loop>
    <div className="setting-row">
      <span>Loop Video</span>
      <div className="toggle-switch"></div>
    </div>
  </ef-toggle-loop>
</div>
```

--------------------------------

### Using the Editframe SDK

Source: https://editframe.com/docs/getting-started/authentication

Instructions on how to initialize and use the Editframe client library in Node.js, including setting up the API token.

```APIDOC
## Using SDK

The client libraries will manage setting the header for you. Simply supply your API token when initialising the client:

### Code Example (Node.js)

```javascript
import { Client } from "@editframe/api/node";

const EF_TOKEN = "/* load your EF_API_TOKEN here. */";
const client = new Client(EF_TOKEN);
```

### Parameters

- **EF_TOKEN** (string) - Required - Your Editframe API token.
```

--------------------------------

### Basic Usage of ef-controls with ef-preview

Source: https://editframe.com/docs/controls/controls

Demonstrates the basic setup of `<ef-controls>` to manage an `<ef-preview>` element. It shows how to link controls like play/pause, scrubber, and time display to a video embedded within the preview. The controls can be placed anywhere in the DOM, not necessarily nested within the preview.

```html
<ef-preview id="my-preview">
  <ef-timegroup slot="canvas" mode="contain" className="w-[1920px] h-[1080px]">
    <ef-video src="/assets/video.mp4"></ef-video>
  </ef-timegroup>
</ef-preview>

<!-- Controls can be placed anywhere, not inside the preview -->
<ef-controls target="my-preview">
  <ef-toggle-play>
    <button slot="play">Play</button>
    <button slot="pause">Pause</button>
  </ef-toggle-play>
  <ef-scrubber></ef-scrubber>
  <ef-time-display></ef-time-display>
</ef-controls>
```

--------------------------------

### Editframe Development Configuration

Source: https://editframe.com/docs/editor-ui/configuration

Illustrates how to set up Editframe for a development environment, using a local API host, a specific signing URL, and the local media engine.

```html
<ef-configuration 
  api-host="http://localhost:3000"
  signing-url="/api/sign"
  media-engine="local"
>
  <!-- Your editor UI -->
</ef-configuration>
```

--------------------------------

### Basic ef-scrubber Usage in ef-preview

Source: https://editframe.com/docs/controls/scrubber

Demonstrates the fundamental integration of the ef-scrubber element within an ef-preview component to control a video. It shows how to nest the scrubber within the 'controls' slot of the ef-preview.

```html
<ef-preview>
  <ef-timegroup slot="canvas" mode="contain" className="w-[1920px] h-[1080px]">
    <ef-video src="/assets/video.mp4"></ef-video>
  </ef-timegroup>
  
  <div slot="controls">
    <ef-scrubber></ef-scrubber>
  </div>
</ef-preview>
```

--------------------------------

### Editframe Contain Timegroup Example

Source: https://editframe.com/docs/elements/timegroup

Shows a contain timegroup where child elements play simultaneously. The group's duration is determined by the longest child. This example uses absolute positioning for overlapping elements.

```htmljsx
<ef-timegroup
id="contain-timegroup"
mode="contain"
class="w-[500px] h-[300px] 
bg-slate-500"
>
<ef-timegroup
mode="fixed"
duration="5s"
class="font-mono absolute top-0 
left-0 w-full h-1/3 bg-red-300 
text-red-800 text-3xl flex 
items-center justify-center"
>
<p>
Contain Item 1
</p>
</ef-timegroup>
<ef-timegroup
mode="fixed"
duration="8s"
class="font-mono absolute top-1/3 
left-0 w-full h-1/3 bg-green-300 
text-green-800 text-3xl flex 
items-center justify-center"
>
<p>
Contain Item 2
</p>
</ef-timegroup>
<ef-timegroup
mode="fixed"
duration="3s"
class="font-mono absolute top-2/3 
left-0 w-full h-1/3 bg-blue-300 
text-blue-800 text-3xl flex 
items-center justify-center"
>
<p>
Contain Item 3
</p>
</ef-timegroup>
</ef-timegroup>
```

--------------------------------

### Create Render

Source: https://editframe.com/docs/resources/renders

Creates a new render job with specified parameters. Supports various output formats and configurations.

```APIDOC
## POST /api/v1/renders

### Description
Creates a new render job with specified parameters. Supports various output formats and configurations.

### Method
POST

### Endpoint
/api/v1/renders

### Parameters
#### Request Body
- **duration_ms** (number) - Optional - Duration of the render in milliseconds.
- **fps** (number) - Optional - Frames per second for the render.
- **height** (number) - Optional - Height of the render in pixels.
- **html** (string) - Optional - HTML content to be rendered.
- **md5** (string) - Optional - MD5 hash of the content.
- **metadata** (Record<string, string>) - Optional - Key-value pairs for metadata.
- **output** (object) - Optional - Output configuration for the render.
  - **audio** (object) - Audio configuration.
    - **codec** (string) - Audio codec (e.g., "aac").
  - **container** (string) - Container format (e.g., "mp4", "jpeg", "png", "webp").
  - **video** (object) - Video configuration.
    - **codec** (string) - Video codec (e.g., "h264").
  - **quality** (number) - Optional - Quality setting for image-based containers.
  - **compression** (number) - Optional - Compression level for PNG and WebP.
  - **transparency** (boolean) - Optional - Whether to include transparency.
  - **strategy** (string) - Optional - Rendering strategy (e.g., "v1").
- **width** (number) - Optional - Width of the render in pixels.
- **work_slice_ms** (number) - Optional - Work slice duration in milliseconds.

### Response
#### Success Response (200)
- **id** (string) - The unique identifier for the created render.
- **md5** (string | null) - The MD5 hash of the rendered content, if available.
- **metadata** (Record<string, string>) - Metadata associated with the render.
- **status** (string) - The current status of the render job.
```

--------------------------------

### POST /api/v1/renders

Source: https://editframe.com/docs/resources

Creates a new render job. You can provide HTML content or a pre-existing MD5 hash to define the render.

```APIDOC
## POST /api/v1/renders

### Description
Creates a new render job. You can provide HTML content or a pre-existing MD5 hash to define the render.

### Method
POST

### Endpoint
/api/v1/renders

### Parameters
#### Request Body
- **duration_ms** (number) - Optional - The duration of the video in milliseconds.
- **fps** (number) - Optional - The frames per second for the video.
- **height** (number) - Optional - The height of the video in pixels.
- **html** (string) - Optional - The HTML content to render.
- **md5** (string) - Optional - The MD5 hash of existing content.
- **metadata** (Record<string, string>) - Optional - Metadata associated with the render.
- **output** (object) - Optional - Specifies the output format and settings.
  - **audio** (object) - Optional - Audio output settings.
    - **codec** (string) - Required - Audio codec (e.g., "aac").
  - **container** (string) - Required - Output container format (e.g., "mp4", "jpeg", "png", "webp").
  - **video** (object) - Optional - Video output settings.
    - **codec** (string) - Required - Video codec (e.g., "h264").
  - **quality** (number) - Optional - Quality setting for image formats (jpeg, webp).
  - **compression** (number) - Optional - Compression level for png, webp.
  - **transparency** (boolean) - Optional - Whether to include transparency for png, webp.
- **strategy** (string) - Optional - Rendering strategy (e.g., "v1").
- **width** (number) - Optional - The width of the video in pixels.
- **work_slice_ms** (number) - Optional - The work slice in milliseconds.

### Response
#### Success Response (200)
- **id** (string) - The unique identifier for the render job.
- **md5** (string | null) - The MD5 hash of the rendered output, if available.
- **metadata** (Record<string, string>) - Metadata associated with the render.
- **status** (string) - The current status of the render job.

#### Response Example
```json
{
  "id": "render_123abc",
  "md5": null,
  "metadata": {},
  "status": "processing"
}
```
```

--------------------------------

### Editframe Fit Timegroup Example

Source: https://editframe.com/docs/elements/timegroup

Demonstrates a fit timegroup which adjusts its duration to match its parent timegroup. This is useful for background elements. This example nests a sequence timegroup and a fit timegroup within a contain timegroup.

```htmljsx
<ef-timegroup
id="fit-example"
mode="contain"
class="w-[500px] h-[300px] 
bg-slate-500 relative"
>
<ef-timegroup
mode="sequence"
class="absolute top-0 left-0 
w-full h-full"
>
<ef-timegroup
mode="fixed"
duration="2.5s"
class="bg-red-300 flex flex-col 
items-center justify-center"
>
<p>
Sequence Item 1
</p>
</ef-timegroup>
<ef-timegroup
mode="fixed"
duration="5s"
class="bg-green-300 flex 
flex-col items-center 
justify-center"
>
<p>
Sequence Item 2
</p>
</ef-timegroup>
</ef-timegroup>
<ef-timegroup
mode="fit"
class="w-[500px] h-[50px] 
bg-blue-500 flex items-center 
justify-center"
>
<p>
Fit Element
</p>
</ef-timegroup>
</ef-timegroup>
```

--------------------------------

### Efficiently Display Same Video Multiple Times with Surfaces

Source: https://editframe.com/docs/elements/examples/multi-track

Shows how to use 'ef-surface' to render the same video multiple times, optimizing performance by sharing a single video decoder. 'target' attribute links surfaces to the source video element.

```html
<ef-timegroup mode="contain" class="w-[1920px] h-[1080px] bg-black">
  <!-- Single video element (hidden) -->
  <ef-video id="source" src="/video.mp4" class="hidden"></ef-video>
  
  <!-- Multiple surfaces showing the same video with different effects -->
  <ef-surface target="source" class="absolute top-0 left-0 w-1/2 h-full object-cover"></ef-surface>
  <ef-surface target="source" class="absolute top-0 right-0 w-1/2 h-full object-cover blur-md"></ef-surface>
  <ef-surface target="source" class="absolute bottom-4 right-4 w-64 h-36 border-2 border-white"></ef-surface>
</ef-timegroup>
```

--------------------------------

### Editframe Sequence Timegroup Example

Source: https://editframe.com/docs/elements/timegroup

Illustrates a sequence timegroup where child elements play one after another. The total duration is the sum of its children's durations. This example nests fixed timegroups within a sequence timegroup.

```htmljsx
<ef-timegroup
id="sequence-timegroup"
mode="sequence"
class="w-[500px] h-[300px] 
bg-slate-500"
>
<ef-timegroup
mode="fixed"
duration="5s"
class="font-mono bg-red-300 
text-red-800 text-3xl flex 
items-center justify-center"
>
<p>
Sequence Item 1
</p>
</ef-timegroup>
<ef-timegroup
mode="fixed"
duration="8s"
class="font-mono bg-green-300 
text-green-800 text-3xl flex 
items-center justify-center"
>
<p>
Sequence Item 2
</p>
</ef-timegroup>
<ef-timegroup
mode="fixed"
duration="3s"
class="font-mono bg-blue-300 
text-blue-800 text-3xl flex 
items-center justify-center"
>
<p>
Sequence Item 3
</p>
</ef-timegroup>
</ef-timegroup>
```

--------------------------------

### Initialize Editframe SDK with API Token (Node.js)

Source: https://editframe.com/docs/getting-started/authentication

Shows how to initialize the Editframe Node.js client by providing the API token during instantiation. The SDK handles setting the authentication header automatically.

```javascript
import { Client } from "@editframe/api/node";

const EF_TOKEN = "/* load your EF_API_TOKEN here. */";
const client = new Editframe(EF_TOKEN);
```

--------------------------------

### Embed Basic Video with Editframe

Source: https://editframe.com/docs/elements/video

Demonstrates the fundamental usage of the ef-video component within an ef-timegroup to display a video. It sets the video source and applies basic styling for containment.

```html
<ef-timegroup
mode="contain"
class="w-[720px] h-[480px] flex 
items-center justify-center bg-black 
overflow-hidden"
>
<ef-video
src="https://assets.editframe.com/
bars-n-tone.mp4"
class="size-full object-contain"
>
</ef-video>
</ef-timegroup>
```

--------------------------------

### React Multi-Track Composition with Editframe Components

Source: https://editframe.com/docs/elements/examples/multi-track

Demonstrates how to create a multi-track video composition using React and Editframe components. It includes background video, sequenced clips, overlay images, and audio tracks, along with waveform visualization. This is useful for building complex timelines.

```jsx
import { Timegroup, Video, Audio, Image, Waveform } from '@editframe/react';

export function MultiTrackComposition() {
  return (
    <Timegroup mode="contain" className="w-[1920px] h-[1080px] bg-black relative">
      {/* Background video track */}
      <Video 
        src="/background.mp4" 
        className="absolute inset-0 w-full h-full object-cover z-0"
      />
      
      {/* Main content track */}
      <Timegroup mode="sequence" className="absolute inset-0 z-10">
        <Video src="/clip1.mp4" className="w-full h-full object-contain" />
        <Video src="/clip2.mp4" className="w-full h-full object-contain" />
      </Timegroup>
      
      {/* Overlay graphics */}
      <Image 
        src="/logo.png" 
        duration="5s"
        className="absolute top-10 right-10 w-32 h-32 z-20"
      />
      
      {/* Audio tracks */}
      <Audio src="/music.mp3" />
      <Audio src="/voiceover.mp3" />
      
      {/* Waveform visualization */}
      <div className="absolute bottom-4 left-4 right-4 z-20">
        <Waveform target="voiceover-audio" mode="wave" className="h-16 text-green-400" />
      </div>
    </Timegroup>
  );
}
```

--------------------------------

### Remote Control Panel with ef-controls

Source: https://editframe.com/docs/controls/controls

Shows a practical example of implementing a remote control panel for a video preview. The `<ef-controls>` element, targeting `editor-preview`, contains various playback controls (play/pause, loop, scrubber, time display) housed in a separate `div` for flexible layout.

```html
<div className="layout">
  <div className="preview-area">
    <ef-preview id="editor-preview">
      <ef-timegroup slot="canvas" mode="contain" className="w-[1920px] h-[1080px]">
        <ef-video src="/video.mp4"></ef-video>
      </ef-timegroup>
    </ef-preview>
  </div>
  
  <div className="control-panel">
    <ef-controls target="editor-preview">
      <div className="flex flex-col gap-4 p-4 bg-gray-800 rounded">
        <h3 className="text-white">Playback Controls</h3>
        
        <div className="flex gap-2">
          <ef-toggle-play>
            <button className="btn" slot="play">▶ Play</button>
            <button className="btn" slot="pause">⏸ Pause</button>
          </ef-toggle-play>
          
          <ef-toggle-loop>
            <button className="btn">🔁 Loop</button>
          </ef-toggle-loop>
        </div>
        
        <ef-scrubber></ef-scrubber>
        <ef-time-display></ef-time-display>
      </div>
    </ef-controls>
  </div>
</div>
```

--------------------------------

### Get Transcription Progress

Source: https://editframe.com/docs/resources/transcriptions

Retrieves the progress of a specific transcription using its ID.

```APIDOC
## GET /api/v1/transcriptions/:id/progress

### Description
Retrieves the progress of a specific transcription.

### Method
GET

### Endpoint
/api/v1/transcriptions/:id/progress

### Parameters
#### Path Parameters
* **id** (string) - Required - The unique identifier of the transcription.

### Response
#### Success Response (200)
* **CompletionIterator** (Class) - An iterator for tracking transcription completion.
```

--------------------------------

### POST /api/v1/image_files

Source: https://editframe.com/docs/resources/image-files

Creates a new image file entry and returns its initial metadata. This is typically the first step before uploading the actual file content.

```APIDOC
## Create Image File

### Description
Creates a new image file entry and returns its initial metadata. This is typically the first step before uploading the actual file content.

### Method
POST

### Endpoint
/api/v1/image_files

### Parameters
#### Request Body
(No specific request body documented, but typically includes image metadata or file reference)

### Response
#### Success Response (200 or 201)
- **byte_size** (number) - The byte size of the image file.
- **complete** (null | boolean) - Whether the image file has been fully uploaded.
- **id** (string) - The id of the image file.
- **md5** (null | string) - The md5 hash of the image file.

#### Response Example
```json
{
  "byte_size": 102400,
  "complete": false,
  "id": "img_abc123",
  "md5": null
}
```
```

--------------------------------

### Get Transcription Info

Source: https://editframe.com/docs/resources/transcriptions

Fetches detailed information about a specific transcription, including its ID and current status.

```APIDOC
## GET /api/v1/transcriptions/:id

### Description
Fetches detailed information about a specific transcription.

### Method
GET

### Endpoint
/api/v1/transcriptions/:id

### Parameters
#### Path Parameters
* **id** (string) - Required - The unique identifier of the transcription.

### Response
#### Success Response (200)
* **id** (string) - The unique identifier for the transcription.
* **status** (string) - The current status of the transcription. Possible values: "complete", "created", "failed", "pending", "transcribing".

#### Response Example
```json
{
  "id": "string",
  "status": "complete" | "created" | "failed" | "pending" | "transcribing"
}
```
```

--------------------------------

### POST /api/v1/isobmff_files/:id/transcribe

Source: https://editframe.com/docs/resources/isobmff-files

Initiates the transcription process for an ISOBMFF file. This endpoint starts the transcription job for a specified file.

```APIDOC
## POST /api/v1/isobmff_files/:id/transcribe

### Description
Initiates the transcription process for an ISOBMFF file. This endpoint starts the transcription job for a specified file.

### Method
POST

### Endpoint
/api/v1/isobmff_files/:id/transcribe

### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the ISOBMFF file to transcribe.

#### Request Body
(No specific request body fields documented)

### Request Example
(No request example provided)

### Response
#### Success Response (200)
- **file_id** (string) - The ID of the file being transcribed.
- **id** (string) - The ID of the transcription job.
- **track_id** (number) - The ID of the track within the file being transcribed.

#### Response Example
```json
{
  "file_id": "isobmff_file_123",
  "id": "transcription_job_xyz",
  "track_id": 1
}
```
```

--------------------------------

### Basic Waveform Display with HTML

Source: https://editframe.com/docs/elements/waveform

This snippet demonstrates the basic usage of the <ef-waveform> component by linking it to an <ef-audio> element and setting its display properties. It utilizes custom HTML elements and standard HTML attributes for configuration.

```html
<ef-timegroup
mode="contain"
class="aspect-[1/1] w-[500px] h-
[500px] text-pink-400 bg-black flex 
items-center justify-center"
>
<ef-audio
src="https://assets.editframe.com/
card-joker.mp3"
id="sample-audio"
>
</ef-audio>
<ef-waveform
target="sample-audio"
mode="wave"
class="w-full h-[300px] block"
>
</ef-waveform>
</ef-timegroup>
```

--------------------------------

### GET /api/v1/isobmff_files/:id/transcription

Source: https://editframe.com/docs/resources/isobmff-files

Retrieves the transcription data for a given ISOBMFF file. This includes details about the work slice and track duration.

```APIDOC
## GET /api/v1/isobmff_files/:id/transcription

### Description
Retrieves the transcription data for a given ISOBMFF file. This includes details about the work slice and track duration.

### Method
GET

### Endpoint
/api/v1/isobmff_files/:id/transcription

### Parameters
#### Path Parameters
- **id** (string) - Required - The ID of the ISOBMFF file for which to retrieve transcription data.

### Request Example
(No request example provided)

### Response
#### Success Response (200)
- **id** (string) - The ID of the transcription.
- **isobmff_track** (object) - Information about the ISOBMFF track.
  - **duration_ms** (number) - The duration of the track in milliseconds.
- **work_slice_ms** (number) - The duration of the work slice in milliseconds.

#### Response Example
```json
{
  "id": "transcription_abc",
  "isobmff_track": {
    "duration_ms": 5000
  },
  "work_slice_ms": 4500
}
```
```
Tokens:
Raw