editframe/playback

Put your media
in motion.

Combine footage, titles, sound, and animation. Preview and seek them on one timeline.

Read the video element →Set up local playback →

Explore the architecture

Playback

From URL to usable playback.

Keep the source and access policy in your own product. The timeline controls where the clip appears and which part of it plays.

<ef-timegroup mode="fixed" duration="8s">
  <ef-video
    src="https://cdn.example.com/interview.mov"
    sourcein="2s"
    sourceout="10s"
  ></ef-video>
</ef-timegroup>

Local development

Prepare playback while you build.
Keep the source path familiar.

Browser support varies by source format. During Vite development, the Editframe plugin serves local assets and prepares streamable segments when the composition requests a source.

Use the plugin to keep local source paths in your composition while you build the editor. Decide separately how production storage and access control work for your application.

The Vite plugin runs on the same origin as the application, so local development does not need an api-host attribute.

// vite.config.ts
import { defineConfig } from "vite"
import { vitePluginEditframe } from "@editframe/vite-plugin"

export default defineConfig({
  plugins: [vitePluginEditframe({
    root: "./src",
    cacheRoot: "./src/assets/.cache",
  })],
})

<!-- The Vite plugin serves local media on the app origin. -->
<ef-timegroup mode="contain">
  <ef-video src="/assets/raw.mov"></ef-video>
</ef-timegroup>

Private media (optional)

Keep videos private.
Share only what you mean to.

For protected Editframe-hosted media, your server authorizes each requested URL and returns a short-lived playback token.

→Keep the API key on your server
→Validate access before minting a token
→Works for video, image, and caption files

URL signing docs →

// Server route: authenticate and authorize first.
import { Client, createURLToken } from "@editframe/api"

app.post("/sign-url", async (req, res) => {
  const token = await createURLToken(client, req.body.url)
  res.json({ token })
})

// Composition requests a token from signing-url for protected media.