Simple rating component

Demo:

advanced/070 component schema

This is a simplified schema of a advanced/070 component element:

{
    "type": "component",
    "component": "advanced/070",
    "settings": {
        "rating": {}
    }
}

Check the full specification of the Component schema in the API documentation.

Settings property for advanced/070

This component accepts the following object items in the settings property:

rating object

Defines the rating component properties

Check all available object properties here.

Object property

Default value

value

Specify an integer number from 0 to 5

symbol

"star"

Defines what symbol to use. Select star|heart

vertical-align

"center"

horizontal-align

"center"

size

"3vw"

color

"gold"

off-color

"transparent"

Color of the non-rated stars or hearts

Usage examples

Check the following examples of advanced/070:

{
    "width": 640,
    "height": 320,
    "quality": "high",
    "draft": true,
    "scenes": [
        {
            "background-color": "#6BAA75",
            "elements": [
                {
                    "type": "component",
                    "component": "advanced/070",
                    "settings": {
                        "rating": {
                            "value": 4,
                            "symbol": "star",
                            "size": "12vw",
                            "off-color": "rgba(255,255,255,0.1)"
                        }
                    },
                    "start": 0.5,
                    "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->width = 640;
$movie->height = 320;
$movie->quality = 'high';
$movie->draft = true;

// Create the scenes of the movie

// Create SCENE 1
$scene1 = new Scene;
$scene1->background-color = '#6BAA75';
$scene1->addElement([
'component',
'advanced/070',
	[
		[
4,
'star',
'12vw',
'rgba(255,255,255,0.1)'
		]
	],
0.5,
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("width", 640);
movie.set("height", 320);
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", "#6BAA75");
scene1.addElement([
"component",
"advanced/070",
	[
		[
4,
"star",
"12vw",
"rgba(255,255,255,0.1)"
		]
	],
0.5,
5
]);
movie.addScene(scene1);

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

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

Simple rating component

← Documentation

Text styles

Component packs