Video Editor

This is an advanced video editor that can be embedded into any website. It uses Rendley SDK under the hood and has functionalities such as adding filters, effects, transitions, dragging and dropping clips, splitting and trimming, changing text properties, and different video resolutions.

The video editor was created using web components, making it embeddable into any website created with any library, whether it be React, Angular, Vue, PHP, or HTML.

Video Editor Cover

Features

The Rendley Video Editor interface provides a range of advanced features for creating and editing videos. Some of the key features include:

  • Filters: Apply filters to your video clips to change their color, contrast, brightness, and more.
  • Effects: Add visual effects such as blur, freeze, or speed up/slow down to create unique and engaging videos.
  • Transitions: Seamlessly transition between different video clips using a range of built-in transitions.
  • Drag-and-drop clipping: Easily add, remove, or reorder video clips in your project by dragging and dropping them onto the timeline.
  • Splitting and trimming: Split long video clips into smaller segments, and trim them to specific lengths for better storytelling.

Installation Guide

Follow these steps to install and embed the Rendley Video Editor:

1. Add Required Headers to enable SharedArrayBuffer (opens in a new tab) functionality

Cross-Origin-Embedder-Policy: require-corp
Cross-Origin-Opener-Policy: same-origin

2. Import the Video Editor

Include the following script in your HTML to import the video editor:

<script type="module">
  import {defineCustomElements} from
  "https://cdn.rendley.com/sdk/video-editor/1.0.0/loader/index.js";
  defineCustomElements();
</script>

3. Obtain a License

Get your license from Rendley (opens in a new tab) to use the video editor in your projects.

4. Embed the Video Editor

Add the video editor to your HTML with the required attributes:

<rendley-video-editor
  id="rendley"
  licensename="YOUR_LICENSE_NAME"
  licensekey="YOUR_LICENSE_KEY"
  pexelsapikey="YOUR_PEXELS_API_KEY"
  giphyapikey="YOUR_GIPHY_API_KEY"
  theme="dark"
></rendley-video-editor>

Replace YOUR_LICENSE_NAME, YOUR_LICENSE_KEY, YOUR_PEXELS_API_KEY, and YOUR_GIPHY_API_KEY with your actual license and API keys.

5. Optional: Handle Events and Access the Engine Instance

For more control over the video editor, you can listen to various events and interact with the underlying engine instance. Here’s how to set it up:

// Get the video editor element
let rendleyTemplateElement = document.getElementById("rendley");
 
// Listen to render success and error events
rendleyTemplateElement.addEventListener("onRenderSuccess", (blobUrl) => {
  console.log("--> Render Success", { blobUrl });
});
 
rendleyTemplateElement.addEventListener("onRenderError", (message) => {
  console.log("--> Render Error", { message });
});
 
// Listen to other events and interact with the engine
rendleyTemplateElement.addEventListener("onReady", async () => {
  const engineInstance = await rendleyTemplateElement.getEngine();
  const engine = engineInstance.getInstance();
 
  // Example event handling
  engine.events.on("gallery:added", (gallery) => {
    const file = engine.getLibrary().getMediaById(gallery.mediaDataId);
    console.log("--> Media Added", { gallery, file });
  });
 
  engine.events.on("gallery:removed", (gallery) => {
    console.log("--> Media Removed", { gallery });
  });
});

This setup allows you to monitor rendering events, access the engine instance, and respond to various events like media addition or removal.

EffectPlayground ↗