Introduction

1. 1. Upload your HTML5 creative as a zip file (i.e. your html file should include links to javascript, CSS, and images) or as an url (hosted on your server). 
2. 2. GIF rendering call with parameters like height, width, duration, etc.
3. 3. Webhook information to get a downloadable URL once an animated GIF gets created.
4. 4. A pinging service to wait for GIF output and its ongoing progress.

Method: Uploadzip

Description:

This service is used to upload a zip file of your HTML5 creative. A zip file should contain one html file along with its dependent resources like CSS, Javascript, and images. This service returns "creativeid" in the response, which is used in subsequent service calls. Please Note: If you want to generate a GIF from an http url hosted on your server (instead of a zip file), then please do not use this service and move to the next service, ‘UploadUrl’.

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

Request Body Parameters

Response Body Parameters

Success response example

                                     { "status": "success",  "creativeid": "creative_550x550_10ed7e8783" }
                                

Error response example

                                     { "status": " error ",  "message” ": "No file has been uploaded. " }
                                

Method: UploadUrl

Description:

This service is used to post the "http url" of your HTML5 creative. This "http url" should be hosted on your server. It returns "creativeid" in response, which is used in subsequent service calls.

Please Note: If you are uploading a zip file of your HTML5 creative, then please do not use this service and refer to the "UploadZip" service.

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

Request Body Parameters

Response Body Parameters

Success response example

                                    { "status": "success",  "creativeid": "creative_550x550_10ed7e8783" }
                                

Error response example

                                    { "status": " error ",  "message” ": "No file has been uploaded. " }
                                

Method: ConvertToGif

Description:

This service converts your HTML5 creative into an animated GIF. This service initiates the rendering call asynchronously. It returns'mediaid' as a response, and'mediaid' is used to check the progress of rendering/encoding via service call 'CheckStatus'. 

If you are providing information about the webhook url, then you don't need to check the status of execution; our service will automatically post the "downloadable url" of the output to the webhook url.

                                    Service url: https://html5animationtogif.com/api/converttogif.ashx  
                                

Request Body Parameters

Response Body Parameters

Success response example

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

Error response example

                                    { "status": "error",  "message": "Invalid API key or Client Id" }
                                

Method: Checkstatus

Description:

This service is used to check the status of conversions. It should be invoked after the "converttogif" service. This service can be invoked periodically (or at intervals).
Please Note: If you are passing 'webhook' url (in the converttogif service), then skip this service. Once the gif is created, the url and other information will be automatically posted to the webhook url. 

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

Request Body Parameters

For example

                                    https://html5animationtogif.com/api/checkstatus.ashx?
creativeid=creative_550x550_10ed7e8783&mediaid=34488&fileext=gif
                                

Response Body Parameters

Success response example

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

Specifies, encoding of gif

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

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

Error response example

                                    { "status": "error",  "message": "File doesn't exist." }
                                

Synchronization of gif with its actual Start and End time

Problem Definition:

You have been experiencing that sometimes HTML5 creative takes time to load in the browser before actual animation gets started. Also, sometimes HTML5 animation displays a loader until content gets loaded in the browser. It is a challenge to ask the gif renderer to wait and then start recording the gif. It is challenging to record gifs from the actual start to the end.

Solution:

To solve such a problem, you need to place the following javascript code inside the javascript file of your HTML5 creative. In your javascript, call the 'trim_start' function when the animation begins and the 'trim_end' function when it is finished/ended.

                                    
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{ }

}

                                        
                                      

Please note: the duration of the animation should be calculated by adding an approximate content's load-time in the browser and calculated value should be passed with the "duration" attribute of "converttogif" service. See the picture below.

The renderer will open the animation in the browser, it takes some time to load the content. Animation's javascript should invoke trim_media.ashx with the "start" action. Once the animation reaches its end, Animation's javascript should invoke trim_media.ashx with the "end" action. In the above example shown in the picture, the animation starts at 3 seconds and ends at 9 seconds. Hence the "duration" should be passed as 9+ 2 = 11 seconds with the "converttogif" service. Here, 2 seconds are just for the buffer. Gif or video will be created length of 6 seconds in above example.

Download: Sample

Javascript sample code for API integration:

We have created sample code in javascript and placed it inside the html file. Your developer can refer to it for API integration. Please see the following link to download sample code. 

Download

                                    
    
    
    //-- Init --//
    var clientid = "1062";
    var apikey = "17gfdc80-b1be-459b-52b7-f12cbf6ef077";
    var creativeid = "";
    var mediaid = "";
    function SendVideoRequest(myobj) {
        //-- Upload URL --//
        myobj.style.display = "none";

        var data = new FormData();
        data.append("url", "https://previews.envatousercontent.com/files/240056227/banners/A/728x90/index.html");
        
        

        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_gif(creativeid);
            } else {
                alert(response.message)
            }
        };
        xhr.send(data);

    }

  

    //-- Convert GIF --//
    function convert_gif(id) {
        var data = new FormData();
        
        
        data.append("width", "728");
        data.append("height", "90");
        data.append("duration", "9");

        data.append("fps", "12");
        data.append("audio", "N");
        data.append("webhookurl", "");
        // A webhook url is a simple http web address (hosted on your server) that should accept the parameter "download url" from html5animationtogif.com once the output is ready. Refer to the document for more details.

        data.append("creativefitoption", "lefttop");
        data.append("clientid", clientid);
        data.append("apikey", apikey);
        data.append("creativeid", id);
        data.append("maxsize", "");
        data.append("quality", "3"); // Possible values 1 (low quality) or 2 or 3 or 4 (best quality)
        data.append("loop", "1"); // 0 for forever
        
       
        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://html5animationtogif.com/api/converttogif.ashx', true);
        xhr.onload = function () {
            var response = JSON.parse(xhr.responseText);
            if (response.status == "success") {
                mediaid = response.mediaid;
                
                document.getElementById("txtResponse").style.display = "block";
                WaitForOutput();
            } else {
                alert(response.message)
            }
        };
        xhr.send(data);
    }

    function WaitForOutput() {

        var xhr = new XMLHttpRequest();
        xhr.open('GET', "https://html5animationtogif.com/api/checkstatus.ashx?creativeid=" + creativeid + "&mediaid=" + mediaid + "&fileext=gif", true);
      
        xhr.onload = function () {
            
            document.getElementById("txtResponse").value = xhr.responseText;
            var response = JSON.parse(xhr.responseText);
            
            if (response.status == "success") {
                if (response.jobstatus != "done") {

                    window.setTimeout(WaitForOutput, 2000);
                }
                else if (response.jobstatus == "done") {

                    window.open(response.url);

                }
            }
            else if (response.status == "error") { alert(response.message) }
        };
        xhr.send();

    }