Developer API (HTML/CSS Animation to Video)

How It Works

Convert your animations in four simple steps

1. Submit Your Animation

Upload your creative as either:

A zip file containing all assets
A publicly accessible HTTP URL

2. Configure Parameters

Specify rendering options including:

Dimensions (width/height)
Duration and frame rate
Quality settings

3. Receive Webhook

Automatic notifications when:

Conversion is complete
Video is ready for download
Errors occur during processing

4. Check Status

Optional monitoring through our:

Status API endpoint
Real-time progress updates
Error reporting

Note: You'll need an API key to use this service. Get your API key here.

API Endpoints

Upload Zip

POST

https://html5animationtogif.com/api/uploadzip.ashx

Upload a compressed archive containing your HTML5 creative package. Your submission must include:

A single HTML file (entry point)
All associated resources (CSS, JavaScript, and images)

Response
Upon successful upload, you'll receive a creativeid in the response. Store this identifier for all subsequent API calls.

Alternative Submission Method
For animations hosted on your server, use our UploadUrl service instead of zip file upload.

Request Parameters

Parameter	Type	Required	Description
FileData	multi-part form data	Yes	Submit your HTML5 creative (zip) as a multi-part form data upload

Example Request

POST https://html5animationtogif.com/api/uploadzip.ashx HTTP/1.1
Host: html5animationtogif.com
Content-Type: application/binary

const formData = new FormData();
formData.append('file', document.querySelector('input[type=file]').files[0]);

fetch('https://html5animationtogif.com/api/uploadzip.ashx', {
  method: 'POST',
  body: formData
})
.then(response => response.json())
.then(data => console.log(data));

Response

  
{ "status": "success",  "creativeid": "creative_550x550_10ed7e8783" }
Or
{ "status": " error ",  "message” ": "No file has been uploaded. " }

Upload Url

POST

https://html5animationtogif.com/api/uploadurl.ashx

Submit a publicly accessible URL of your hosted HTML5 creative for processing.

This endpoint is specifically for content hosted on your own servers. For local files, please use the uploadzip.ashx instead.

Requirements

Valid HTTP/HTTPS URL pointing to your HTML5 creative
Publicly accessible endpoint (no authentication required)
All assets must be properly linked with relative paths

Response
Upon successful upload, you'll receive a creativeid in the response. Store this identifier for all subsequent API calls.

Request Parameters

Parameter	Type	Required	Description
url	string	Yes	Post your HTML5 creative URL

Example Request

POST https://html5animationtogif.com/api/uploadurl.ashx  HTTP/1.1
Host: html5animationtogif.com
Content-Type: text/plain

 var data = new FormData();
        data.append("url", "https://previews.envatousercontent.com/files/240056227/banners/A/728x90/index.html"); // URL of creative hosted on your server
        
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://html5animationtogif.com/api/uploadurl.ashx', true);
        xhr.onload = function () {
            var response = JSON.parse(xhr.responseText);
            if (response.status == "success") {
                creativeid = response.creativeid;
                
                console.log("creativeid=" + creativeid);
                
                //convert_video(creativeid);

            } else {
                alert(response.message)
            }

Response

  
{ "status": "success",  "creativeid": "creative_550x550_10ed7e8783" }
Or
{ "status": " error ",  "message” ": "No file has been uploaded. " }

Convert to Video

POST

https://html5animationtogif.com/api/converttovideo.ashx

Converts your HTML5 creative into video format through asynchronous rendering.

Asynchronous Processing: Conversion begins immediately after API call and continues in the background.

Request Parameters

Parameter	Type	Required	Description
clientid	string	Yes	A unique customer ID, generated when the 'Obtain API Key and Client ID' link is clicked, and subsequently sent via email.
apikey	string	Yes	A unique key, generated when the 'Obtain API Key and Client ID' link is clicked, and subsequently sent via email.
creativeid	string	Yes	The creativeId is a unique identifier returned after successfully uploading your HTML5 content through either: UploadZip or UploadUrl service.
width	integer	Yes	Output width in pixels.
height	integer	Yes	Output height in pixels.
duration	float	Yes	Length of animation.
starttime	float	No	Skips the initial few seconds of the animation before recording the video. The default value is 0.
fps	integer	Yes	Specifies the number of frames per second in the video output. Available options: `25`, `30`, `60` Recommendation: Use `60` for smoother animation.
audio	string	No	Specifies whether to record the audio used in the animation and attach it to the video. Use Y to enable audio, or N to disable it. Default value: N
webhookurl	string	No	Default value: `""` (i.e., `webhookurl=""`) The webhook is a notification mechanism that allows your application to receive an update once a video is successfully created. To use it, provide the HTTP URL of your application via the `webhookurl` parameter. When the video is ready, our service will send a POST request to your specified URL with the following parameters: downloadurl – Direct link to download the video. You can host this video on your own server. mediaid – Unique ID of the video in our system. creativeid – Unique ID of your HTML5 creative on our server (generated by `uploadzip` or `uploadurl`). Example: `webhookurl=https://yourserver.com/getvideostatus/` How to access parameters (C# example): `var url = Request["downloadurl"];`
creativefitoption	string	No	Possible values: `"lefttop"` and `"center"` Default value: `"lefttop"` Use `"center"` if your HTML5 creative is displayed in the center of the browser window. (Responsive layout) Use `"lefttop"` if your HTML5 creative is positioned in the top-left corner of the browser. (Fix layout)
bitratevalue	integer	No	This option specifies the bitrate value for CBR (Constant Bit Rate) encoding. Use 17 for optimal file size. Use 8 for better video quality. Allowed range: `6` (minimum) to `35` (maximum)

Example Request

POST https://html5animationtogif.com/api/converttovideo.ashx HTTP/1.1
Host: html5animationtogif.com
Content-Type: text/plain

var data = new FormData();
        data.append("clientid", clientid);
        data.append("apikey", apikey);
        data.append("creativeid", id);
        data.append("width", "300");
        data.append("height", "600");
        data.append("duration", "8");
        data.append("fps", "60");
        data.append("audio", "N");
        data.append("webhookurl", "");
        data.append("creativefitoption", "center");
        data.append("bitratevalue", "17");
        
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://html5animationtogif.com/api/converttovideo.ashx', true);
        xhr.onload = function () {
            var response = JSON.parse(xhr.responseText);
            if (response.status == "success") {
                mediaid = response.mediaid;
                console.log("Video " + mediaid + ".");
                alert("Video " + mediaid + ".");
                
                //WaitForOutput();
            } else {
                alert(response.message)
            }
        };
        xhr.send(data);

Response

  
{ "status": "success",  "message": "",  " mediaid ": "34488" }
Or
{ "status": "error",  "message": "error message" }

Get Conversion Status

GET

https://html5animationtogif.com/api/checkstatus.ashx

This service allows you to check the conversion status.

It should be called after invoking the converttovideo service. You can call it periodically—for example, every 5 seconds.

Note: If you have provided a webhook URL in the converttovideo service, you can skip this step. Once the video is ready, the video URL and related information will be automatically sent to your webhook.

Request Parameters

Parameter	Type	Required	Description
creativeid	string	Yes	The creativeId is a unique identifier returned after successfully uploading your HTML5 content through either: UploadZip or UploadUrl service.
mediaid	string	Yes	The mediaid is a unique identifier returned by the ConvertToVideo service.
fileext	string	Yes	The file extension for an MP4 file. (i.e mp4)

Example Request

GET https://html5animationtogif.com/api/checkstatus.ashx  HTTP/1.1
Host: html5animationtogif.com
Content-Type: text/plain

 function WaitForOutput() {

        var xhr = new XMLHttpRequest();
        xhr.open('GET', "https://html5animationtogif.com/api/checkstatus.ashx?creativeid=" + creativeid + "&mediaid=" + mediaid + "&fileext=mp4", true);
      
        xhr.onload = function () {
            
            
            var response = JSON.parse(xhr.responseText);
            
            if (response.status == "success") {
                if (response.jobstatus != "done") {
                    window.setTimeout(WaitForOutput, 5000);
                }
                else if (response.jobstatus == "done") {
                    var URL=response.url;
                }
            }
            else if (response.status == "error") { alert(response.message) }
        };
        xhr.send();

    }

Response Parameters

Parameter	Type	Description
status	string	The `status` field indicates the result of your API request with two possible values: "success" - The operation completed successfully "error" - The operation failed (check error details) .
jobstatus	string	The `jobstatus` field indicates the current processing status. Possible values include "Pending", progress percentages such as "10%", "50%", and "Done". Pending Initial state when request is queued XX% Percentage complete (e.g., 25%, 50%, 75%) Done Processing successfully completed Note: Percentage values may not increment linearly due to varying processing stages.
message	string	Indicates the error message, if any occurred during processing.
url	string	The download URL of the generated MP4 video.

Response

  
Specifies, scrapping of content 
{ “status”: "success",  "jobstatus": "Scraping content. Please wait...",  "url": "" }

Specifies, encoding of video

{ "status": "success",  "jobstatus": "20%",  "url": "" }
{ "status": "success",  "jobstatus": "40%",  "url": "" }
{ "status": "success",  "jobstatus": "90%",  "url": "" }

Specifies, video has been created.
{ "status": "success",  "jobstatus": "done",  "url": "https://html5animationtogif.com/API/mediadownload.ashx?mediaid=34488&creativeid=creative_550x550_10ed7e8783&fileext=mp4&inline=y" }

Video Synchronization Solution

Problem Definition

When recording HTML5 animations to video, two key challenges arise:

Initial Load Delay: The creative may take time to load resources before animation begins
Loader Screens: Many animations display loaders before showing actual content

These factors make it difficult to automatically capture the exact start and true end of the animation content.

Implementation Solution

Add these JavaScript functions to your HTML5 creative:

trim_start()

Call this when your actual animation begins (after loaders/initialization):

function animationStart() {
  // Your animation code
  if (typeof trim_start === 'function') {
    trim_start(); // Signals actual content beginning
  }



}

trim_end()

Call this when your animation completely finishes:

function animationEnd() {
  // Cleanup code
  if (typeof trim_end === 'function') {
    trim_end(); // Signals content completion
  }
}

Complete Integration Example


    // Place the code in your JavaScript file
    
    var trim_request_url = "http://localhost/capturestart/trim_media.ashx";

    function trim_start()
    {
    try {
    var timeinmilisec = Math.abs(new Date() - new Date("1970/01/01"));
    var request = new XMLHttpRequest();
    request.open('GET', trim_request_url + "?action=start&time=" + timeinmilisec, true);
    request.send(null);
    } catch{ }

    }


    function trim_end() {
    try {
    var timeinmilisec = Math.abs(new Date() - new Date("1970/01/01"));
    var request = new XMLHttpRequest();
    request.open('GET', trim_request_url + "?action=end&time=" + timeinmilisec, true);
    request.send(null);
    } catch{ }

    }

The video renderer will use these markers to precisely trim your video, eliminating any loader screens or initialization periods.

Note: These functions are automatically detected by our video renderer - no additional configuration needed.

Duration Calculation: Total duration = (Approximate buffer for loading) + (Actual animation's length) + (Addtional buffer of 4 seconds)
Example: If animation runs 6s after 3s load time, pass duration= 3 + 6 + 4= 13s (or slightly higher) to the converttovideo api (i.e duration=13).

Initialization

Renderer opens HTML5 creative in browser (load time begins)

Content Start

Animation calls trim_media.ashx?action=start (3s in example)

Content End

Animation calls trim_media.ashx?action=end (9s total in example)

Initialization

Renderer records 4s extra (13s total in example

Final Output

Renderer creates 6s video

The renderer automatically trims between your markers, but needs the total duration (including buffer) to properly allocate resources.

Pro Tip:

When uncertain about load times, use this safe default formula:

duration = (Animation Length) + 10 seconds buffer

Example: For a 15s animation, pass duration=25 to ConvertToVideo API

Rate Limits

The API is limited to 100 requests per hour per API key. Contact us if you need higher limits.

Client Libraries

JavaScript

HTML example with javascript

Download