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

featureDescription
layersA comma separated list of layers that can be added to the composition
modeCustomize 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:

OptionDescription
audioEnables the ability to add Audio layers to the video
imageEnables the ability to add Audio layers to the video
textEnables the ability to add Text layers to the video
videoEnables the ability to add Video layers to the video
waveformEnables 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:

OptionDescription
compositionAllow the end-user to construct a video from scratch (default)
previewAllow the end-user to view a real-time preview of a composition
templateAllow 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',
})