JSON2Video allows you to add graphical elements created with simple HTML and CSS in your scenes and movies.
If you have minimal HTML skills you can create your own screen graphics and customize them to your needs.
JSON2Video supports full HTML5 and CSS3 specifications,
and you can even use Tailwind CSS in your
HTML snippets.
Check the HTML Element schema in the API documentation.
Simple HTML snippet
This first example creates a HTML Element with a simple ordered list (<ol>) and defines CSS styles for the <li> and <p>
{
"resolution": "full-hd",
"quality": "high",
"scenes": [
{
"background-color": "#4392F1",
"elements": [
{
"type": "html",
"html": "<p style=\"margin-bottom:2em\">What is <em>Lorem ipsum</em>?:</p><ol><li>It's simply dummy text of the printing and typesetting industry</li><li>It has been the industry's standard dummy text ever since the 1500s</li><li>It was popularised in the 1960s with the release of Letraset sheets</li></ol>",
"settings": {
"font-size": "25px"
},
"x": 960,
"width": 800,
"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->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' => 'html',
'html' => '<p style="margin-bottom:2em">What is <em>Lorem ipsum</em>?:</p><ol><li>It\'s simply dummy text of the printing and typesetting industry</li><li>It has been the industry\'s standard dummy text ever since the 1500s</li><li>It was popularised in the 1960s with the release of Letraset sheets</li></ol>',
'settings' => [
'font-size' => '25px'
],
'x' => 960,
'width' => 800,
'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("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": "html",
"html": "<p style=\"margin-bottom:2em\">What is <em>Lorem ipsum</em>?:</p><ol><li>It's simply dummy text of the printing and typesetting industry</li><li>It has been the industry's standard dummy text ever since the 1500s</li><li>It was popularised in the 1960s with the release of Letraset sheets</li></ol>",
"settings": {
"font-size": "25px"
},
"x": 960,
"width": 800,
"duration": 10
});
movie.addScene(scene1);
// Finally, render the movie
movie.render();
// Wait for the movie to be rendered
movie.waitToFinish();
You can use the settings property to define default CSS settings for the HTML snippet.
The resulting video is:
Your browser does not support the video tag.
Make sure your HTML snippet code is properly escaped for double quotes (\") to make it JSON compatible.
Tailwind CSS component
In this example we are inserting a TailwindCSS component over a video background. Using TailwindCSS components in your videos can be a very useful and effective
way if you have some HTML skills.
To showcase this feature we chose the "User With Details" card from Meraki UI :.
The movie script uses one scene with a Video Element and a HTML Element. The HTML Element sets tailwindcss: true and
includes the TailwindCSS HTML snippet in the html property. The HTML Element appears at second 2 for 12 seconds, with a
fade-in and fade-out effect of 1 second.
{
"resolution": "hd",
"quality": "high",
"scenes": [
{
"elements": [
{
"type": "video",
"src": "https://assets.json2video.com/assets/videos/stars-01.mp4"
},
{
"type": "html",
"html": "<div class=\"max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800\"> <img class=\"object-cover object-center w-full h-56\" src=\"https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80\" alt=\"avatar\"> <div class=\"flex items-center px-6 py-3 bg-gray-900\"> <svg class=\"w-6 h-6 text-white fill-current\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17 21C15.8954 21 15 20.1046 15 19V15C15 13.8954 15.8954 13 17 13H19V12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12V13H7C8.10457 13 9 13.8954 9 15V19C9 20.1046 8.10457 21 7 21H3V12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12V21H17ZM19 15H17V19H19V15ZM7 15H5V19H7V15Z\"/> </svg> <h1 class=\"mx-3 text-lg font-semibold text-white\">Focusing</h1> </div> <div class=\"px-6 py-4\"> <h1 class=\"text-xl font-semibold text-gray-800 dark:text-white\">Patterson johnson</h1> <p class=\"py-2 text-gray-700 dark:text-gray-400\">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p> <div class=\"flex items-center mt-4 text-gray-700 dark:text-gray-200\"> <svg class=\"w-6 h-6 fill-current\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M14 11H10V13H14V11Z\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z\"/> </svg> <h1 class=\"px-2 text-sm\">Meraki UI</h1> </div> <div class=\"flex items-center mt-4 text-gray-700 dark:text-gray-200\"> <svg class=\"w-6 h-6 fill-current\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z\"/> </svg> <h1 class=\"px-2 text-sm\">California</h1> </div> <div class=\"flex items-center mt-4 text-gray-700 dark:text-gray-200\"> <svg class=\"w-6 h-6 fill-current\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z\"/> </svg> <h1 class=\"px-2 text-sm\">patterson@example.com</h1> </div> </div> </div>",
"tailwindcss": true,
"y": 50,
"start": 2,
"duration": 12,
"fade-in": 1,
"fade-out": 1
}
],
"duration": 15
}
]
}
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 = '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/stars-01.mp4'
]);
$scene1->addElement([
'type' => 'html',
'html' => '<div class="max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800"> <img class="object-cover object-center w-full h-56" src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="avatar"> <div class="flex items-center px-6 py-3 bg-gray-900"> <svg class="w-6 h-6 text-white fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M17 21C15.8954 21 15 20.1046 15 19V15C15 13.8954 15.8954 13 17 13H19V12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12V13H7C8.10457 13 9 13.8954 9 15V19C9 20.1046 8.10457 21 7 21H3V12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12V21H17ZM19 15H17V19H19V15ZM7 15H5V19H7V15Z"/> </svg> <h1 class="mx-3 text-lg font-semibold text-white">Focusing</h1> </div> <div class="px-6 py-4"> <h1 class="text-xl font-semibold text-gray-800 dark:text-white">Patterson johnson</h1> <p class="py-2 text-gray-700 dark:text-gray-400">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p> <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200"> <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M14 11H10V13H14V11Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z"/> </svg> <h1 class="px-2 text-sm">Meraki UI</h1> </div> <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200"> <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z"/> </svg> <h1 class="px-2 text-sm">California</h1> </div> <div class="flex items-center mt-4 text-gray-700 dark:text-gray-200"> <svg class="w-6 h-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z"/> </svg> <h1 class="px-2 text-sm">patterson@example.com</h1> </div> </div> </div>',
'tailwindcss' => true,
'y' => 50,
'start' => 2,
'duration' => 12,
'fade-in' => 1,
'fade-out' => 1
]);
$scene1->duration = 15;
$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", "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/stars-01.mp4"
});
scene1.addElement({
"type": "html",
"html": "<div class=\"max-w-sm mx-auto overflow-hidden bg-white rounded-lg shadow-lg dark:bg-gray-800\"> <img class=\"object-cover object-center w-full h-56\" src=\"https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80\" alt=\"avatar\"> <div class=\"flex items-center px-6 py-3 bg-gray-900\"> <svg class=\"w-6 h-6 text-white fill-current\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M17 21C15.8954 21 15 20.1046 15 19V15C15 13.8954 15.8954 13 17 13H19V12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12V13H7C8.10457 13 9 13.8954 9 15V19C9 20.1046 8.10457 21 7 21H3V12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12V21H17ZM19 15H17V19H19V15ZM7 15H5V19H7V15Z\"/> </svg> <h1 class=\"mx-3 text-lg font-semibold text-white\">Focusing</h1> </div> <div class=\"px-6 py-4\"> <h1 class=\"text-xl font-semibold text-gray-800 dark:text-white\">Patterson johnson</h1> <p class=\"py-2 text-gray-700 dark:text-gray-400\">Full Stack maker & UI / UX Designer , love hip hop music Author of Building UI.</p> <div class=\"flex items-center mt-4 text-gray-700 dark:text-gray-200\"> <svg class=\"w-6 h-6 fill-current\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path d=\"M14 11H10V13H14V11Z\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M7 5V4C7 2.89545 7.89539 2 9 2H15C16.1046 2 17 2.89545 17 4V5H20C21.6569 5 23 6.34314 23 8V18C23 19.6569 21.6569 21 20 21H4C2.34314 21 1 19.6569 1 18V8C1 6.34314 2.34314 5 4 5H7ZM9 4H15V5H9V4ZM4 7C3.44775 7 3 7.44769 3 8V14H21V8C21 7.44769 20.5522 7 20 7H4ZM3 18V16H21V18C21 18.5523 20.5522 19 20 19H4C3.44775 19 3 18.5523 3 18Z\"/> </svg> <h1 class=\"px-2 text-sm\">Meraki UI</h1> </div> <div class=\"flex items-center mt-4 text-gray-700 dark:text-gray-200\"> <svg class=\"w-6 h-6 fill-current\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M16.2721 10.2721C16.2721 12.4813 14.4813 14.2721 12.2721 14.2721C10.063 14.2721 8.27214 12.4813 8.27214 10.2721C8.27214 8.063 10.063 6.27214 12.2721 6.27214C14.4813 6.27214 16.2721 8.063 16.2721 10.2721ZM14.2721 10.2721C14.2721 11.3767 13.3767 12.2721 12.2721 12.2721C11.1676 12.2721 10.2721 11.3767 10.2721 10.2721C10.2721 9.16757 11.1676 8.27214 12.2721 8.27214C13.3767 8.27214 14.2721 9.16757 14.2721 10.2721Z\"/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.79417 16.5183C2.19424 13.0909 2.05438 7.3941 5.48178 3.79418C8.90918 0.194258 14.6059 0.0543983 18.2059 3.48179C21.8058 6.90919 21.9457 12.606 18.5183 16.2059L12.3124 22.7241L5.79417 16.5183ZM17.0698 14.8268L12.243 19.8965L7.17324 15.0698C4.3733 12.404 4.26452 7.9732 6.93028 5.17326C9.59603 2.37332 14.0268 2.26454 16.8268 4.93029C19.6267 7.59604 19.7355 12.0269 17.0698 14.8268Z\"/> </svg> <h1 class=\"px-2 text-sm\">California</h1> </div> <div class=\"flex items-center mt-4 text-gray-700 dark:text-gray-200\"> <svg class=\"w-6 h-6 fill-current\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"> <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M3.00977 5.83789C3.00977 5.28561 3.45748 4.83789 4.00977 4.83789H20C20.5523 4.83789 21 5.28561 21 5.83789V17.1621C21 18.2667 20.1046 19.1621 19 19.1621H5C3.89543 19.1621 3 18.2667 3 17.1621V6.16211C3 6.11449 3.00333 6.06765 3.00977 6.0218V5.83789ZM5 8.06165V17.1621H19V8.06199L14.1215 12.9405C12.9499 14.1121 11.0504 14.1121 9.87885 12.9405L5 8.06165ZM6.57232 6.80554H17.428L12.7073 11.5263C12.3168 11.9168 11.6836 11.9168 11.2931 11.5263L6.57232 6.80554Z\"/> </svg> <h1 class=\"px-2 text-sm\">patterson@example.com</h1> </div> </div> </div>",
"tailwindcss": true,
"y": 50,
"start": 2,
"duration": 12,
"fade-in": 1,
"fade-out": 1
});
scene1.set("duration", 15);
movie.addScene(scene1);
// Finally, render the movie
movie.render();
// Wait for the movie to be rendered
movie.waitToFinish();
The resulting video is:
Your browser does not support the video tag.
