How to add video elements

Video elements are a type of Element that allow you to add a video in a scene or a movie. You must specify a URL to the video file (for example, an MP4 file) and the properties that define the behaviour of the video. You can read the full schema specification for the video elements in the API documentation.

Simple video

The following JSON creates a simple movie with one scene and one video.

JSON
PHP
NodeJS

{
    "resolution": "full-hd",
    "scenes": [
        {
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/beach-01.mp4"
                }
            ]
        }
    ]
}

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->resolution = 'full-hd';

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->addElement([
	'type' => 'video',
	'src' => 'https://assets.json2video.com/assets/videos/beach-01.mp4'
]);
$movie->addScene($scene1);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("resolution", "full-hd");

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.addElement({
	"type": "video",
	"src": "https://assets.json2video.com/assets/videos/beach-01.mp4"
});
movie.addScene(scene1);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

This JSON relies on the defaults:

The movie default duration is -1 that means automatic based on the scene duration
The scene default duration is -1 that means automatic based on the element duration
The video element default duration is -1 that means automatic based on the asset duration
The video is positioned at x=0, y=0
etc...

You can check all defaults in the API Documentation.

The resulting video won't be really interesting as it will be exactly as the original one 😏. So, let's do something a little more interesting in the next example.

Concatenating 2 videos

In this example, we will create a movie that concatenates 2 videos. We can do it in different ways, for example:

Adding the 2 source videos in the same scene, one after the other; or
Adding 2 scenes, one source video in each scene

Although the result may seem very similar, the second option is recommended as it has some advantages that we will see in the following examples.

{
    "resolution": "full-hd",
    "scenes": [
        {
            "comment": "Scene #1",
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/beach-01.mp4"
                },
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/beach-02.mp4",
                    "start": 11
                }
            ]
        }
    ]
}

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->resolution = 'full-hd';

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->comment = 'Scene #1';
$scene1->addElement([
	'type' => 'video',
	'src' => 'https://assets.json2video.com/assets/videos/beach-01.mp4'
]);
$scene1->addElement([
	'type' => 'video',
	'src' => 'https://assets.json2video.com/assets/videos/beach-02.mp4',
	'start' => 11
]);
$movie->addScene($scene1);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("resolution", "full-hd");

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("comment", "Scene #1");
scene1.addElement({
	"type": "video",
	"src": "https://assets.json2video.com/assets/videos/beach-01.mp4"
});
scene1.addElement({
	"type": "video",
	"src": "https://assets.json2video.com/assets/videos/beach-02.mp4",
	"start": 11
});
movie.addScene(scene1);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

The movie resulting of rendering the previous JSON is:

The problem with this approach is that we need to know in advance the length of the first video, so we can specify it in the start property of the second video.

Another downside is that we can not apply a video transition between the two videos.

Two scenes, one video in each scene

JSON
PHP
NodeJS

{
    "resolution": "full-hd",
    "scenes": [
        {
            "comment": "Scene #1",
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/beach-01.mp4"
                }
            ]
        },
        {
            "comment": "Scene #2",
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/beach-02.mp4"
                }
            ]
        }
    ]
}

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->resolution = 'full-hd';

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->comment = 'Scene #1';
$scene1->addElement([
	'type' => 'video',
	'src' => 'https://assets.json2video.com/assets/videos/beach-01.mp4'
]);
$movie->addScene($scene1);

// Create SCENE 2
$scene2 = new Scene;
$scene2->comment = 'Scene #2';
$scene2->addElement([
	'type' => 'video',
	'src' => 'https://assets.json2video.com/assets/videos/beach-02.mp4'
]);
$movie->addScene($scene2);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("resolution", "full-hd");

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("comment", "Scene #1");
scene1.addElement({
	"type": "video",
	"src": "https://assets.json2video.com/assets/videos/beach-01.mp4"
});
movie.addScene(scene1);

// Create SCENE 2
let scene2 = new Scene;
scene2.set("comment", "Scene #2");
scene2.addElement({
	"type": "video",
	"src": "https://assets.json2video.com/assets/videos/beach-02.mp4"
});
movie.addScene(scene2);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

The video output of the JSON above is exactly the same than in the example 2.1, but with this approach we do not need to know the duration of the first video beforehand because the duration of each scene is the calculated duration of all the child elements, and the scenes are chained one after the other.

Additionally, using this approach we can take advantage of the scene transitions, something not available for the video elements.

Three videos with transitions

In this example, we will create a movie chaining 3 videos and adding transitions between the videos. To achieve this, we will use 3 scenes, one video in each, applying different transitions between Scene #1 - Scene #2, and between Scene #2 - Scene #3.

JSON
PHP
NodeJS

{
    "resolution": "full-hd",
    "scenes": [
        {
            "comment": "Scene #1",
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/beach-01.mp4"
                }
            ]
        },
        {
            "comment": "Scene #2",
            "transition": {
                "style": "circleopen",
                "duration": 1.5
            },
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/beach-02.mp4"
                }
            ]
        },
        {
            "comment": "Scene #3",
            "transition": {
                "style": "fade",
                "duration": 2
            },
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/beach-03.mp4"
                }
            ]
        }
    ]
}

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->resolution = 'full-hd';

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->comment = 'Scene #1';
$scene1->addElement([
	'type' => 'video',
	'src' => 'https://assets.json2video.com/assets/videos/beach-01.mp4'
]);
$movie->addScene($scene1);

// Create SCENE 2
$scene2 = new Scene;
$scene2->comment = 'Scene #2';
$scene2->transition = [
	'style' => 'circleopen',
	'duration' => 1.5
];
$scene2->addElement([
	'type' => 'video',
	'src' => 'https://assets.json2video.com/assets/videos/beach-02.mp4'
]);
$movie->addScene($scene2);

// Create SCENE 3
$scene3 = new Scene;
$scene3->comment = 'Scene #3';
$scene3->transition = [
	'style' => 'fade',
	'duration' => 2
];
$scene3->addElement([
	'type' => 'video',
	'src' => 'https://assets.json2video.com/assets/videos/beach-03.mp4'
]);
$movie->addScene($scene3);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("resolution", "full-hd");

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("comment", "Scene #1");
scene1.addElement({
	"type": "video",
	"src": "https://assets.json2video.com/assets/videos/beach-01.mp4"
});
movie.addScene(scene1);

// Create SCENE 2
let scene2 = new Scene;
scene2.set("comment", "Scene #2");
scene2.set("transition", {
	"style": "circleopen",
	"duration": 1.5
});
scene2.addElement({
	"type": "video",
	"src": "https://assets.json2video.com/assets/videos/beach-02.mp4"
});
movie.addScene(scene2);

// Create SCENE 3
let scene3 = new Scene;
scene3.set("comment", "Scene #3");
scene3.set("transition", {
	"style": "fade",
	"duration": 2
});
scene3.addElement({
	"type": "video",
	"src": "https://assets.json2video.com/assets/videos/beach-03.mp4"
});
movie.addScene(scene3);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

Again, by using scenes instead of chaining videos, we don't need to know the length of the source videos.

The transition property defines what effect to apply in between the previous and current scene.

Video wall

The following example shows how to create a video wall that plays 4 videos side by side. To do this, we add the 4 videos in the same scene, scale them down and position them in different coordinates. Finally, we trim the scene to 10 seconds, so the movie will also be 10 seconds long.

Unlike the other examples, in this case we will generate the movie in high quality using the setting "quality": "high" in the movie object.

JSON
PHP
NodeJS

{
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "duration": 10,
            "elements": [
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/beach-01.mp4",
                    "scale": {
                        "width": 960,
                        "height": 540
                    }
                },
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/beach-02.mp4",
                    "scale": {
                        "width": 960,
                        "height": 540
                    },
                    "x": 960
                },
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/beach-03.mp4",
                    "scale": {
                        "width": 960,
                        "height": 540
                    },
                    "y": 540
                },
                {
                    "type": "video",
                    "src": "https://assets.json2video.com/assets/videos/beach-04.mp4",
                    "scale": {
                        "width": 960,
                        "height": 540
                    },
                    "x": 960,
                    "y": 540
                }
            ]
        }
    ]
}

require 'vendor/autoload.php';

use JSON2Video\Movie;
use JSON2Video\Scene;

// Create and initialize the movie object
$movie = new Movie;
$movie->setAPIKey(YOUR_API_KEY);
$movie->resolution = 'full-hd';
$movie->quality = 'high';

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->duration = 10;
$scene1->addElement([
	'type' => 'video',
	'src' => 'https://assets.json2video.com/assets/videos/beach-01.mp4',
	'scale' => [
		'width' => 960,
		'height' => 540
	]
]);
$scene1->addElement([
	'type' => 'video',
	'src' => 'https://assets.json2video.com/assets/videos/beach-02.mp4',
	'scale' => [
		'width' => 960,
		'height' => 540
	],
	'x' => 960
]);
$scene1->addElement([
	'type' => 'video',
	'src' => 'https://assets.json2video.com/assets/videos/beach-03.mp4',
	'scale' => [
		'width' => 960,
		'height' => 540
	],
	'y' => 540
]);
$scene1->addElement([
	'type' => 'video',
	'src' => 'https://assets.json2video.com/assets/videos/beach-04.mp4',
	'scale' => [
		'width' => 960,
		'height' => 540
	],
	'x' => 960,
	'y' => 540
]);
$movie->addScene($scene1);

// Finally, render the movie
$movie->render();

// Wait for the movie to be rendered
$movie->waitToFinish();

let movie = new Movie;
movie.setAPIKey(YOUR_API_KEY);
movie.set("resolution", "full-hd");
movie.set("quality", "high");

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("duration", 10);
scene1.addElement({
	"type": "video",
	"src": "https://assets.json2video.com/assets/videos/beach-01.mp4",
	"scale": {
		"width": 960,
		"height": 540
	}
});
scene1.addElement({
	"type": "video",
	"src": "https://assets.json2video.com/assets/videos/beach-02.mp4",
	"scale": {
		"width": 960,
		"height": 540
	},
	"x": 960
});
scene1.addElement({
	"type": "video",
	"src": "https://assets.json2video.com/assets/videos/beach-03.mp4",
	"scale": {
		"width": 960,
		"height": 540
	},
	"y": 540
});
scene1.addElement({
	"type": "video",
	"src": "https://assets.json2video.com/assets/videos/beach-04.mp4",
	"scale": {
		"width": 960,
		"height": 540
	},
	"x": 960,
	"y": 540
});
movie.addScene(scene1);

// Finally, render the movie
movie.render();

// Wait for the movie to be rendered
movie.waitToFinish();

The scale property allows us to scale down to half the width (1920/2=960) and half the height (1080/2=540), and the x and y properties move the video element to the correct position.

A missing or omitted x or y implies a value of 0.

Video elements

← Documentation