Video Editor

Editframe enables you to embed an interactive video editor into your app via a simple javascript class. The editor comes with Editframe branding out-of-the-box. Reach out to us if you would like to white-label the editor with your own logo and starting templates, or customize which features are made available to your users.

Initialization

import { Embed } from '@editframe/embed'

new Embed({
  applicationId: string,
  containerId: string // any valid html element id string,
  config, // optionally provide a composition configuration json object produced by editframe-js
  dimensions // defaults to { height: '100vh', width: '100vw'
  layers, // optional list of layers to enable, defaults to all layers enabled
  mode, // "composition" | "preview" | "template"
  templateName, // if mode is "template", the name of a template to load
})

Customizing features

feature	Description
layers	A comma separated list of layers that can be added to the composition
mode	Customize how the end-user will interact with the video editor

layers

The following layers are availabe to be passed to the layers attribute when initializing the Embed class:

Option	Description
audio	Enables the ability to add Audio layers to the video
image	Enables the ability to add Audio layers to the video
text	Enables the ability to add Text layers to the video
video	Enables the ability to add Video layers to the video
waveform	Enables the ability to add Waveform layers to the video

Note: This parameter can only be used in conjunction in composition mode

mode

The following modes are available for use with the mode query param:

Option	Description
`composition`	Allow the end-user to construct a video from scratch (default)
`preview`	Allow the end-user to view a real-time preview of a composition
`template`	Allow the end-user to construct a video based on an existing template

Compostion Mode Example

Here's an example of the video editor in composition mode with only the audio and image layers enabled:

import { Embed } from '@editframe/embed'

new Embed({
  applicationId: 'APP_ID',
  containerId: 'editor-2',
  dimensions: {
    height: '800px',
    width: '100%',
  },
  layers: ['audio', 'image'],
})

Preview Mode Example

Here's an example of the video editor in preview mode:

import { Embed } from '@editframe/embed'

new Embed({
  applicationId: 'APP_ID',
  config: {
    backgroundColor: '#000000FF',
    dimensions: { height: 1920, width: 1080 },
    duration: 9,
    files: [],
    layers: [
      {
        id: 'a0c88b',
        type: 'audio',
        audio: { volume: 1 },
        timeline: { start: 0 },
        transitions: [],
        trim: { end: null, start: 0 },
        source:
          'https://editframe.com/docs/layer-types/add-audio/audio-example.mp3',
      },
      {
        id: 'eb5afc',
        type: 'video',
        audio: { volume: 1 },
        position: {
          angle: 0,
          angleX: 0,
          angleY: 0,
          isRelative: false,
          origin: 'center',
          x: 'center',
          y: 'center',
        },
        size: { format: null, height: null, scale: 1, width: null },
        timeline: { start: 0 },
        transitions: [],
        trim: { end: 3, start: 0 },
        source:
          'https://efapisplat.nyc3.digitaloceanspaces.com/templates/wrapped/smiley-balloons.mp4',
      },
      {
        id: 'b5223f',
        type: 'video',
        audio: { volume: 1 },
        position: {
          angle: 0,
          angleX: 0,
          angleY: 0,
          isRelative: false,
          origin: 'center',
          x: 'center',
          y: 'center',
        },
        size: { format: null, height: null, scale: 1, width: null },
        timeline: { start: 3 },
        transitions: [],
        trim: { end: 3, start: 0 },
        source:
          'https://efapisplat.nyc3.digitaloceanspaces.com/templates/wrapped/book.mp4',
      },
      {
        id: 'a76e84',
        type: 'video',
        audio: { volume: 1 },
        position: {
          angle: 0,
          angleX: 0,
          angleY: 0,
          isRelative: false,
          origin: 'center',
          x: 'center',
          y: 'center',
        },
        size: { format: null, height: null, scale: 1, width: null },
        timeline: { start: 6 },
        transitions: [],
        trim: { end: 3, start: 0 },
        source:
          'https://efapisplat.nyc3.digitaloceanspaces.com/templates/wrapped/rollercoaster.mp4',
      },
    ],
    metadata: {},
    shouldWatermark: true,
  },
  containerId: 'editor-2',
  dimensions: {
    height: '640px',
    width: '360px',
  },
  mode: 'preview',
})