Component elements

You don't need to start your video from scratch. Even if you are not a graphical designer, you can use the Component elements to quickly create good-looking videos with no effort.

The component element is a very powerful tool to supercharge your videos with ready to use predefined features and designs. But these predefined designs are highly customizable using CSS and propietary properties.

Check available components

Anatomy of a component element

Component elements have this blueprint:

{
    "type": "component",
    "component": "[[component-id]]",
    "settings": {
        "[[item]]": {
            "[[item-property]]": "[[item-value]]"
        }
    }
}

• component-id: The component property of the element defines what component to use in the format of pack/number. Example basic/001.
• settings: The settings object of the element defines your customizations to the component, and can have multiple item objects as properties. Each item represents a visual element in the component, like the headline, an image or a card.
• item properties: With the item properties you can change the look and behaviour of the item and they are basically CSS properties plus a few propietary properties.

This is a full example of a component element:

{
    "type": "component",
    "component": "basic/001",
    "settings": {
        "card": {
            "background": "white",
            "border-radius": "10px",
            "padding": "1vw"
        },
        "headline": {
            "color": "red",
            "font-size": "5vw",
            "font-family": "Inter"
        }
    }
}

Supported CSS properties in components

In the contrary of the HTML elements that support any HTML5 tag and any CSS3 declaration, Component elements support a limited sort of CSS3 properties.

The list of supported CSS properties are:

• background
• background-blend-mode
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size
• border
• border-bottom
• border-bottom-left-radius
• border-bottom-right-radius
• border-collapse
• border-color
• border-left
• border-radius
• border-right
• border-spacing
• border-style
• border-top
• border-top-left-radius
• border-top-right-radius
• border-width
• box-shadow
• color
• dir
• display
• drop-shadow
• font-family
• font-size
• font-weight
• height
• letter-spacing
• line-height
• margin
• margin-bottom
• margin-left
• margin-right
• margin-top
• opacity
• padding
• padding-bottom
• padding-left
• padding-right
• padding-top
• text-align
• text-shadow
• text-stroke
• transform
• transform-origin
• width

Propietary properties in components

JSON2Video uses a few propietary properties to simplify the customization of the components.

This propietary properties are:

Component examples

Lower-third example

In the television industry, a lower third is a graphic overlay placed in the lower area of the screen, though not necessarily the entire lower third of it, as the name suggests.

JSON2Video library has a few lower-third components you can use out-of-the-box in your projects. The following example shows how to add a lower-third to a video.

{
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "duration": 5,
            "elements": [
                {
                    "type": "component",
                    "component": "basic/050",
                    "settings": {
                        "headline": {
                            "text": "Lorem ipsum dolor sit amet"
                        }
                    }
                }
            ],
            "background-color": "#4392F1",
            "cache": true
        }
    ]
}

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 = 5;
$scene1->addElement([
'component',
'basic/050',
	[
		[
'Lorem ipsum dolor sit amet'
		]
	]
]);
$scene1->background-color = '#4392F1';
$scene1->cache = 1;
$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", 5);
scene1.addElement([
"component",
"basic/050",
	[
		[
"Lorem ipsum dolor sit amet"
		]
	]
]);
scene1.set("background-color", "#4392F1");
scene1.set("cache", 1);
movie.addScene(scene1);

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

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

The basic/050 component is inpired on the lower thirds used by CNN.

You can get all details of basic/050 here.

Button example

This example showcases how to create a visual button you can add to your video as a call-to-action.

{
    "width": 1920,
    "height": 1080,
    "quality": "high",
    "draft": true,
    "scenes": [
        {
            "background-color": "#4392F1",
            "elements": [
                {
                    "type": "component",
                    "component": "advanced/050",
                    "settings": {
                        "button": {
                            "background": "#E3170A",
                            "border": "0.2vw solid rgba(0,0,0,20%)",
                            "border-radius": "3vw",
                            "padding": "0 15vw",
                            "box-shadow": "inset -1vw -1vw 1vw rgba(0,0,0,0.2)",
                            "text": "Subscribe!",
                            "text-shadow": ".3vw .3vw rgba(0,0,0,0.4)",
                            "font-size": "10vw",
                            "font-family": "Anton"
                        }
                    },
                    "duration": 10,
                    "width": -1,
                    "height": -1,
                    "start": 0,
                    "extra-time": 0,
                    "z-index": 0,
                    "cache": true,
                    "position": "custom",
                    "x": 0,
                    "y": 0
                }
            ],
            "duration": -1
        }
    ],
    "resolution": "full-hd"
}

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->width = 1920;
$movie->height = 1080;
$movie->quality = 'high';
$movie->draft = true;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->background-color = '#4392F1';
$scene1->addElement([
'component',
'advanced/050',
	[
		[
'#E3170A',
'0.2vw solid rgba(0,0,0,20%)',
'3vw',
'0 15vw',
'inset -1vw -1vw 1vw rgba(0,0,0,0.2)',
'Subscribe!',
'.3vw .3vw rgba(0,0,0,0.4)',
'10vw',
'Anton'
		]
	],
10,
-1,
-1,
0,
0,
0,
true,
'custom',
0,
0
]);
$scene1->duration = -1;
$movie->addScene($scene1);
$movie->resolution = 'full-hd';

// 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("width", 1920);
movie.set("height", 1080);
movie.set("quality", "high");
movie.set("draft", true);

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("background-color", "#4392F1");
scene1.addElement([
"component",
"advanced/050",
	[
		[
"#E3170A",
"0.2vw solid rgba(0,0,0,20%)",
"3vw",
"0 15vw",
"inset -1vw -1vw 1vw rgba(0,0,0,0.2)",
"Subscribe!",
".3vw .3vw rgba(0,0,0,0.4)",
"10vw",
"Anton"
		]
	],
10,
-1,
-1,
0,
0,
0,
true,
"custom",
0,
0
]);
scene1.set("duration", -1);
movie.addScene(scene1);
movie.set("resolution", "full-hd");

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

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

Other examples

Check other component examples in the Resources section.