With videogrammer you get an API that allows you to easily convert self-created clips in HTML to suitable video formats. The API offers multiple options to replace HTML elements as you like to get unique videos.
Why?
If you want to serve various social media channels with content and save a lot of time, videogrammer is exactly the right thing for you.
Imagine you want to post a video every day on youtube as a short, on TikTok and on Instagram. To achieve this, you only have to build a template with e.g. google web designer and then call videogrammer with the resulting HTML. All elements (CSS properties, html tags, images, videos, audios,...) can be exchanged "on the fly" by videogrammer when generating the videos. So you have the possibility to publish as many videos as you like with customised content. Isn't that great? 😊
Interactive example
Features
powerful templating
The API offers a rich but lean way to exchange the elements and content of the HTML. Proven concepts are used for this purpose: With the help of CSS selectors, the elements and the properties in the HTML can be exchanged and extended without limits.
In addition, the start and end of the recording can be defined dynamically directly in the HTML. You can also take up to 10 screenshots during the recording.
Full support of HTML5
As the recording takes place in an isolated Chrome browser, full HTML5 support is guaranteed. Even audio and video tags work as desired.
Versatile output
The API can provide any resolution (maximum Full HD) and ratio, any length and video quality as output.
How?
Simple Example
simply post the url of your intended html animation and set the parameters as desired:
curl -X 'POST' \
'https://videogrammer.p.rapidapi.com/video' \
-H 'accept: application/json' \
-H 'Content-Type: application/json' \
-H 'X-RapidAPI-Key: insert_your_rapidapi_key_here'
-d '{
"url": "https://kleizasoftware.bitbucket.io/converter_test/index.html",
"options": {
"width": 1440,
"height": 1440,
"duration": 10
}
}'In the answer you will receive your job id, with which you can download the html animation as an MP4 video after a few seconds:
curl -X 'GET' \
'https://videogrammer.p.rapidapi.com/video?job_id=job_id_in_previous_response' \
-H 'X-RapidAPI-Key: insert_your_rapidapi_key_here'
-H 'accept: application/json'Response:
{
"job_id": "80e24cc7-159d-4d38-ba65-af1e3503dcdd",
"status": "successful",
"video_url": "https://proxy-t2waowgsna-lz.a.run.app/download/80e24cc7-159d-4d38-ba65-af1e3503dcdd.mp4",
"screenshots": [
"https://proxy-t2waowgsna-lz.a.run.app/download/80e24cc7-159d-4d38-ba65-af1e3503dcdd_0.jpg",
"https://proxy-t2waowgsna-lz.a.run.app/download/80e24cc7-159d-4d38-ba65-af1e3503dcdd_1.jpg",
"https://proxy-t2waowgsna-lz.a.run.app/download/80e24cc7-159d-4d38-ba65-af1e3503dcdd_2.jpg"
]
}Many Options
You can tell the API that your html elements can be modified as you wish. So you can use the HTML animation like a template for as many videos as you like. This way you can build a faceless channel on social media with ease:
{
"url": "https://kleizasoftware.bitbucket.io/converter_test/",
"options": {
"duration": 20,
"width": 1080,
"height": 1080,
"modifiers": {
"cssproperties": [
{
"selector": "#animated_bar_horizontal",
"property": "background-color",
"value": "black"
}
],
"tagattributes": [
{
"selector": "#animated_bar",
"name": "class",
"value": "test_class",
"mode": "add"
}
],
"tagcontent": [
{
"selector": "#counter_unit",
"content": "milliseconds"
}
]
}
}
}In addition, you can use javascript calls in the HTML animation to determine when the recording should begin and end. Furthermore, it is possible to take up to 10 additional screenshots at any given time during the recording.
window.startRecording();
....
....
window.takeScreenshot();
....
window.takeScreenshot();
....
....
window.endRecording();File Upload
If you do not have a hosted server, you can also upload the html file directly in a multibody. Have a look at documentation of the Endpoints.
Webhooks
Instead of waiting for the completion with polling requests, you can also set a webhook in the options that will be notified as soon as the video is ready.