There are times when you may need to display two side-by-side shots on screen at once, also known as split screen video. In order to create the split screen effect using JavaScript, you will need a video editing API capable of encoding and decoding video. Here's how to do that using Node.js in just a few lines of code.
const Creatomate = require('creatomate');
const client = new Creatomate.Client('Your API Key');
client.render({
source: new Creatomate.Source({
outputFormat: 'mp4',
width: 1920,
height: 1080,
duration: 6,
elements: [
new Creatomate.Video({
type: 'video',
source: 'https://cdn.creatomate.com/demo/river.mp4',
x: '25%',
width: '50%',
}),
new Creatomate.Video({
type: 'video',
source: 'https://cdn.creatomate.com/demo/bridge.mp4',
x: '75%',
width: '50%',
}),
],
}),
}).then((renders) => {
console.log(renders);
});How it works: First, begin by installing the Creatomate library from NPM. It is now possible to set up a split screen video scene simply by using JSON. Start by specifying the resolution of the final video. In this case, we'll create a split screen video with a 1080p landscape layout (1920 by 1080) using two input videos.
To display both videos side by side, we'll make use of the "x" and "width" properties. Keep in mind that these positions are relative to the center of each video element. So, we need to set the positions of the elements to "25%" and "75%" respectively, making them appear on the left and right sides. To ensure both elements take up half of the screen horizontally, we'll set the width to "50%".
It's important to note that we only modified the horizontal properties, "x" and "width," and left the vertical properties, "y" and "height," unchanged. By default, the "y" position and height of an element are set to "50%" and "100%" respectively, which means they occupy the entire vertical range. Thus, there's no need to modify those values.
If you'd like to experiment with different values, you can use a video editor that allows for easy dragging and dropping of videos into place. After you're done with the video template, the editor will automatically generate the necessary code for your Node.js application.