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

00:00

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": [
    
  ]
}

00:00

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"
    },
  ]
}

00:00

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"
    },
  ]
}

00:00

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"
    }
  ]
}

00:00

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"
    }
  ]
}

00:00

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",
      "audio": {"volume": 1} ,
      "timeline": { "start": 0, end: null },
      "trim": { "end": null, "start": 0 },
      "source": "https://editframe.com/docs/composition/layers/audio/audio-example.mp3"
    }
  ]
}

00:00

Methods

The following methods are available to be passed to the Player class

Method	Description
play()	Play the current video
pause()	Pause the current video
stop()	Stop the current video
seek(seconds)	Move to the desired video timestamp

Play

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

player.play()

Pause

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

player.pause()

Stop

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

player.stop()

Seek (Move to the desired video timestamp)

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

player.seek(10)

React component

This our recommended way to use the Editframe Player. It's a React component that can be used to render the Editframe Player in your React application.

React component

import "./App.css";
import { Player } from "@editframe/react";
import { useState } from "react";

function App() {
const [playerState, setPlayerState] =  useState<"stopped" | "playing" | "paused">("playing"); // you can use this to control the player
const [seek, setSeek] = useState(0); // you can use this to seek the player
const config = {
backgroundColor: "#000000FF",
dimensions: {
  height: 1080,
  width: 1920,
},
duration: 10,
metadata: {},
layers: [],
}; // this is the config for the player to render the video 
return (
<div className="App">
  <div style={{ height: "100vh", width: "100vw" }}>
    <Player
      config={config}
      style={{
        height: "100%",
        width: "100%",
      }}
      applicationId="demo"
      loop={false}
      playerState={playerState}
      seek={seek}
    />
  </div>
</div>
);
}
export default App;

You can check our React Player Demo App