Player
The Editframe Player is a web-based video player that allows you to play videos that can also be rendered by Editframe. It is a great way to allow users to preview their videos before downloading or rendering them, and can be incorporated into your own application.
Quickstart
Getting started with the Editframe Player on the web is easy. Simply install the Typescript-based package and import the Player class.
Installation
npm install @editframe/embed
Usage
import { Player } from '@editframe/embed'
const player = new Player({
applicationId: 'MY_APP_ID', // Your Editframe application ID
containerId, // The ID of the container element
config, // The Editframe composition configuration
dimensions, // The dimensions of the player; defaults to 100% width and 100% height
hideControls, // Whether to hide the player controls; defaults to false
})
Common use cases
The Editframe Player is a great way to present multimedia in realtime. It can be used in a variety of ways, including:
- Displaying a video preview before rendering with Editframe
- Providing pseudo-video experiences without ever rendering a video
- Allowing users to customize a video before rendering with other rendering programs or services
Example
Let's take a look at a simple example of how to use the Editframe Player. You would like to build an app that allows users to create a video slideshow from three existing videos. These videos should also have audio and you're interested in including a company watermark. Most importantly you want users to preview the video before downloading it. You can use the Editframe Player to build an interface for this.
Setting up configuration
The Player can be configured with a composition configuration, which is a JSON object that describes the video composition. This is the same configuration that can optionally be used to render videos with Editframe.
Establishing the canvas
We begin by creating a the main parameters of the composition. We set the dimensions to 1080x1080, the background color to black, and the duration to 9 seconds.
Blank video composition
{
"backgroundColor": "#000000FF",
"dimensions": { "height": 1080, "width": 1080 },
"duration": 9,
"layers": [
]
}
Adding the first video
Let's insert our first layer into the composition. We'll add a video layer that starts at the beginning of the composition and lasts for 3 seconds.
Composition with one video
{
"backgroundColor": "#000000FF",
"dimensions": { "height": 1080, "width": 1080 },
"duration": 9,
"layers": [
{
"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"
},
]
}
Adding the second video
Now that we have our first video, we'll add a second video layer that starts where the last left off, and lasts for 3 seconds.
Composition with two videos
{
"backgroundColor": "#000000FF",
"dimensions": { "height": 1080, "width": 1080 },
"duration": 9,
"layers": [
{ ... },
{
"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, "end": 6 },
"transitions": [],
"trim": { "end": 3, "start": 0 },
"source": "https://efapisplat.nyc3.digitaloceanspaces.com/templates/wrapped/book.mp4"
},
]
}
Adding the third video
The third video works the same way as the first and second. It'll start at the end of the second video, and last for 3 seconds.
Composition with all three videos
{
"backgroundColor": "#000000FF",
"dimensions": { "height": 1080, "width": 1080 },
"duration": 9,
"layers": [
{ ... },
{ ... },
{
"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, end: 9 },
"transitions": [],
"trim": { "end": 3, "start": 0 },
"source": "https://efapisplat.nyc3.digitaloceanspaces.com/templates/wrapped/rollercoaster.mp4"
}
]
}
Adding a company logo/watermark
Phew! The videos are in place, but we still need to add a company logo or watermark. We'll add it to the very center of the composition, so it can't be missed.
Let's add a new layer to the composition with a type of image.
Composition with all three videos
{
"backgroundColor": "#000000FF",
"dimensions": { "height": 1080, "width": 1080 },
"duration": 9,
"layers": [
{ ... }, // video 1
{ ... }, // video 2
{ ... }, // video 3
{
"type": "image",
"position": {
"angle": 0,
"angleX": 0,
"angleY": 0,
"isRelative": false,
"origin": "center",
"x": "center",
"y": "center"
},
"size": { "format": null, "height": null, "scale": 1, "width": 700 },
"timeline": { "start": 0, end: null },
"transitions": [],
"trim": { "end": null, "start": 0 },
"source": "https://cdn.editframe.com/web/logo_white.png"
}
]
}
Adding an audio track
We're almost done! The last thing we need to do is add an audio track to our composition. We can do this by adding a new layer with a type of audio.
Composition with all layers
{
"backgroundColor": "#000000FF",
"dimensions": { "height": 1080, "width": 1080 },
"duration": 9,
"layers": [
{ ... }, // video 1
{ ... }, // video 2
{ ... }, // video 3
{ ... }, // logo
{
"type": "audio",
"volume": 1 ,
"timeline": { "start": 0, end: null },
"trim": { "end": null, "start": 0 },
"source": "https://editframe.com/docs/composition/layers/audio/audio-example.mp3"
}
]
}