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.

{
    "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([
'video',
'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([
"video",
"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:

1. Adding the 2 source videos in the same scene, one after the other; or
2. 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.

Two videos in the same scene

{
    "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([
'video',
'https://assets.json2video.com/assets/videos/beach-01.mp4'
]);
$scene1->addElement([
'video',
'https://assets.json2video.com/assets/videos/beach-02.mp4',
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([
"video",
"https://assets.json2video.com/assets/videos/beach-01.mp4"
]);
scene1.addElement([
"video",
"https://assets.json2video.com/assets/videos/beach-02.mp4",
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

{
    "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([
'video',
'https://assets.json2video.com/assets/videos/beach-01.mp4'
]);
$movie->addScene($scene1);

// Create SCENE 2
$scene2 = new Scene;
$scene2->comment = 'Scene #2';
$scene2->addElement([
'video',
'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([
"video",
"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([
"video",
"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.

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