HOW TO

subscribe to html5tomp4 plan here.

render a HTML5 Clip to video

insert your rapidAPI-Key into

curl --location --request POST 'https://html5tomp4.p.rapidapi.com/v1/render' \
--header 'X-RapidAPI-Key: XXXXXXXXXXX' \
--header 'Content-Type: application/json' \
--data-raw '{
    "url": "https://kleizasoftware.bitbucket.io/converter_test/"
}'

The rendering of the clip will now begin. In the response you will receive the job_id, which you can use to retrieve the Download URL after some time:

{
    "job_id": "2db7e782-a283-4baa-bee3-1dc748750954",
    "status": "pending"
}

After a few minutes you can use this request to retrieve the url:

curl --location --request GET 'https://html5tomp4.p.rapidapi.com/v1/result?job_id=2db7e782-a283-4baa-bee3-1dc748750954' \
--header 'X-RapidAPI-Key: XXXXXXXXXXXX'

result:

{
    "job_id": "2db7e782-a283-4baa-bee3-1dc748750954",
    "status": "successful",
    "video_url": "https://api.kleiza.de/download/2db7e782-a283-4baa-bee3-1dc748750954.mp4"
}

Modifiers

To customize the clip at query time, you can additionally define selectors that override various values in the html:

"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": "mil'lisec\" <br />onds"
                }
            ]

Be aware that the modifiers are executed at the domready event. This means that the dom elements must already exist at this event.

Options

have a look at https://rapidapi.com/karolisk/api/html5tomp4/tutorials/options-explained and endpoints for an overview.

Troubleshooting

Slow or lagging animation

try not to animate with javascript. instead use css animations.

audio stutters, is async or muted

I’m working on it. As long as it is not fixed, you can try to vary the audio track.

Further problems

contact me. I’m glad to help you.