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',
})