Adding Text elements

Text elements are based on design templates that accelerate results and deliver professional-looking videos with no effort. We have dozens of templates you can use, and we are creating new ones every month.

There are simple templates for displaying plain text, others that include text animations, others with complementary text boxes, and others that can be used as chyrons or lower-thirds. Brow se the template catalog in our template library.

Simple text

This first example shows a simple text centred on the video using all default settings of the Text element and the default basic/001 template. The background of the basic/001 template is transparent, so make sure not to use the same color for the text and the background.

JSON
PHP
NodeJS

{
    "project": "tutorial",
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "background-color": "#4392F1",
            "elements": [
                {
                    "type": "text",
                    "items": [
                        {
                            "text": "Hello world"
                        }
                    ],
                    "y": 510,
                    "duration": 10
                }
            ]
        }
    ]
}

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->project = 'tutorial';
$movie->resolution = 'full-hd';
$movie->quality = 'high';

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->background_color = '#4392F1';
$scene1->addElement([
	'type' => 'text',
	'items' => [
		[
			'text' => 'Hello world'
		]
	],
	'y' => 510,
	'duration' => 10
]);
$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("project", "tutorial");
movie.set("resolution", "full-hd");
movie.set("quality", "high");

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("background-color", "#4392F1");
scene1.addElement({
	"type": "text",
	"items": [
		{
			"text": "Hello world"
		}
	],
	"y": 510,
	"duration": 10
});
movie.addScene(scene1);

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

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

The output of the JSON above is:

The Text element defaults are:

The default template is basic/001
The default x is 0
The default width is the movie width (1920 pixels)
The default height is the movie height (1080 pixels)

The default settings for basic/001 template are:

The default color is white ( #FFFFFF )
The default background-color is none
The default font-size is 30 pixels
The default font-family is sans-serif
The default font-weight is 400
The default text-align is center
The default shadow is 1

So the text element dimensions are 1920x1080 and it's positioned at x=0, y=510. The text is centered within the text element, so it's centered within the movie.

Text overlay

Of course, we can overlay text to videos and images. The following is a nice tribute to Lorem ipsum dummy text.

JSON
PHP
NodeJS

{
    "project": "tutorial",
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "elements": [
                {
                    "type": "video",
                    "src": "https:\/\/assets.json2video.com\/assets\/videos\/beach-01.mp4"
                },
                {
                    "type": "text",
                    "template": "basic\/001",
                    "items": [
                        {
                            "text": "<em>Lorem Ipsum<\/em> has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book",
                            "color": "#FFFFFF",
                            "font-size": 60,
                            "font-family": "Roboto Condensed",
                            "shadow": 2,
                            "text-align": "left",
                            "em-color": "#FFFFFF",
                            "em-background-color": "#FFB703"
                        },
                        {
                            "text": "It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged",
                            "color": "#FFFFFF",
                            "font-size": 60,
                            "font-family": "Birthstone"
                        }
                    ],
                    "width": 960,
                    "x": 900,
                    "y": 50
                }
            ]
        }
    ]
}

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->project = 'tutorial';
$movie->resolution = 'full-hd';
$movie->quality = 'high';

// 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'
]);
$scene1->addElement([
	'type' => 'text',
	'template' => 'basic/001',
	'items' => [
		[
			'text' => '&lt;em&gt;Lorem Ipsum&lt;/em&gt; has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book',
			'color' => '#FFFFFF',
			'font-size' => 60,
			'font-family' => 'Roboto Condensed',
			'shadow' => 2,
			'text-align' => 'left',
			'em-color' => '#FFFFFF',
			'em-background-color' => '#FFB703'
		],
		[
			'text' => 'It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged',
			'color' => '#FFFFFF',
			'font-size' => 60,
			'font-family' => 'Birthstone'
		]
	],
	'width' => 960,
	'x' => 900,
	'y' => 50
]);
$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("project", "tutorial");
movie.set("resolution", "full-hd");
movie.set("quality", "high");

// 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"
});
scene1.addElement({
	"type": "text",
	"template": "basic/001",
	"items": [
		{
			"text": "&lt;em&gt;Lorem Ipsum&lt;/em&gt; has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book",
			"color": "#FFFFFF",
			"font-size": 60,
			"font-family": "Roboto Condensed",
			"shadow": 2,
			"text-align": "left",
			"em-color": "#FFFFFF",
			"em-background-color": "#FFB703"
		},
		{
			"text": "It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged",
			"color": "#FFFFFF",
			"font-size": 60,
			"font-family": "Birthstone"
		}
	],
	"width": 960,
	"x": 900,
	"y": 50
});
movie.addScene(scene1);

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

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

The movie script does the following:

The movie includes a scene with 2 elements: a video element and a text element
The video element just links to the beach video and sits on the background
The text element uses the basic/001 template with 2 text items
In the basic/001 template, text items behave like paragraphs
The first text item is left-aligned and customises the emphasis with a background and foreground color
The second text item is center-aligned (default setting)

In the font-family property you can use any system font (Arial, Georgia, sans-serif, serif, monospace) or use any Google Font. Be careful because Google Font font-family names are case sensitive, and must match with an existing font-weight.

Text animation

Text elements also allow you to create text animations based on existing templates. You can browse all the available text templates in the library.

The following example uses the basic/005 template to show a simple text animation on an empty scene:

JSON
PHP
NodeJS

{
    "project": "tutorial",
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "background-color": "#6BAA75",
            "elements": [
                {
                    "type": "text",
                    "template": "basic\/005",
                    "items": [
                        {
                            "text": "JSON2Video",
                            "shadow": 0,
                            "font-size": 100,
                            "font-family": "Inter",
                            "font-weight": "900"
                        },
                        {
                            "text": "Your video API",
                            "shadow": 0,
                            "font-size": 100,
                            "font-family": "Inter",
                            "font-weight": "900"
                        }
                    ],
                    "x": 0,
                    "y": 510,
                    "width": 1920,
                    "height": 1080,
                    "duration": 5
                }
            ]
        }
    ]
}

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->project = 'tutorial';
$movie->resolution = 'full-hd';
$movie->quality = 'high';

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->background_color = '#6BAA75';
$scene1->addElement([
	'type' => 'text',
	'template' => 'basic/005',
	'items' => [
		[
			'text' => 'JSON2Video',
			'shadow' => 0,
			'font-size' => 100,
			'font-family' => 'Inter',
			'font-weight' => '900'
		],
		[
			'text' => 'Your video API',
			'shadow' => 0,
			'font-size' => 100,
			'font-family' => 'Inter',
			'font-weight' => '900'
		]
	],
	'x' => 0,
	'y' => 510,
	'width' => 1920,
	'height' => 1080,
	'duration' => 5
]);
$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("project", "tutorial");
movie.set("resolution", "full-hd");
movie.set("quality", "high");

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.set("background-color", "#6BAA75");
scene1.addElement({
	"type": "text",
	"template": "basic/005",
	"items": [
		{
			"text": "JSON2Video",
			"shadow": 0,
			"font-size": 100,
			"font-family": "Inter",
			"font-weight": "900"
		},
		{
			"text": "Your video API",
			"shadow": 0,
			"font-size": 100,
			"font-family": "Inter",
			"font-weight": "900"
		}
	],
	"x": 0,
	"y": 510,
	"width": 1920,
	"height": 1080,
	"duration": 5
});
movie.addScene(scene1);

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

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

The resulting video is:

Lower-third animation

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 some lower-third templates you can use out-of-the-box in your projects. The following example shows how to add a lower-third to a video.

JSON
PHP
NodeJS

{
    "project": "tutorial",
    "resolution": "full-hd",
    "quality": "high",
    "scenes": [
        {
            "elements": [
                {
                    "type": "video",
                    "src": "https:\/\/assets.json2video.com\/assets\/videos\/spacex-01.mp4"
                },
                {
                    "type": "text",
                    "template": "basic\/020",
                    "items": [
                        {
                            "text": "SpaceX's Falcon Heavy rocket is ready"
                        },
                        {
                            "text": "First launch is planned for February 2018"
                        },
                        {
                            "text": "Space tech"
                        }
                    ],
                    "x": 50,
                    "y": 880,
                    "width": 1820,
                    "start": 7,
                    "duration": 10
                }
            ]
        }
    ]
}

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->project = 'tutorial';
$movie->resolution = 'full-hd';
$movie->quality = 'high';

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->addElement([
	'type' => 'video',
	'src' => 'https://assets.json2video.com/assets/videos/spacex-01.mp4'
]);
$scene1->addElement([
	'type' => 'text',
	'template' => 'basic/020',
	'items' => [
		[
			'text' => 'SpaceX\'s Falcon Heavy rocket is ready'
		],
		[
			'text' => 'First launch is planned for February 2018'
		],
		[
			'text' => 'Space tech'
		]
	],
	'x' => 50,
	'y' => 880,
	'width' => 1820,
	'start' => 7,
	'duration' => 10
]);
$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("project", "tutorial");
movie.set("resolution", "full-hd");
movie.set("quality", "high");

// Create the scenes of the movie

// Create SCENE 1
let scene1 = new Scene;
scene1.addElement({
	"type": "video",
	"src": "https://assets.json2video.com/assets/videos/spacex-01.mp4"
});
scene1.addElement({
	"type": "text",
	"template": "basic/020",
	"items": [
		{
			"text": "SpaceX's Falcon Heavy rocket is ready"
		},
		{
			"text": "First launch is planned for February 2018"
		},
		{
			"text": "Space tech"
		}
	],
	"x": 50,
	"y": 880,
	"width": 1820,
	"start": 7,
	"duration": 10
});
movie.addScene(scene1);

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

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

The basic/020 template is inpired on the lower thirds used by CNN. The template only requires you to provide two or three text items.

Text elements

Documentation

Simple text

Text overlay

Text animation

Lower-third animation