Videogram Upload And List Api

August 18, 2017

VIDEOGRAM CREATE API

OVERVIEW

This API accepts standard form POST, gets the remotely-hosted movie server-to-server, processes it into a videogram and sends an email when ready. Processing time varies depending on video length and server load, but is usually less than 5 minutes for shorter titles.

Prerequisites:

Create a free publisher account at http://cinemacraft.tv/solutions#register-form and then mail api@videogram.com for the API_KEY

DESCRIPTION

Request Type: POST (all parameters required)
Accepts: application/x-www-form-urlencoded
Returns: application/json
Parameters:

api_key: 1234abcd-e56f-4789-0123-456789abcdef
url: http://example.com/video/ (Accepts top-page / share urls from most services like Vimeo, Dailymotion, Youtube etc. or a direct url of any streamable .mp4 file).
title: Title of the Video.
email: me@example.com (A message will be sent to this address when the video has been processed, the id and url of the finished videogram will be in the email)

RESPONSE

200 : Ok + detailed info in JSON format
400 : Bad Request
403 : Forbidden ( i.e. bad / missing api key )
500 : Internal Server Error.

400 series responses include details in JSON format.
500 series responses contain no useful information in the response body.

EXAMPLE:

curl -d "api_key=1234abcd-e56f-4789-0123-456789abcdef&url=https://www.youtube.com/watch?v=MfvPDTbnplQ&email=me@yahoo.com" http://www.videogram.com/api/videogram/?fields=data(uuid,vgtitle,vgplayerurl)

1	curl -d "api_key=1234abcd-e56f-4789-0123-456789abcdef&url=https://www.youtube.com/watch?v=MfvPDTbnplQ&email=me@yahoo.com" http://www.videogram.com/api/videogram/?fields=data(uuid,vgtitle,vgplayerurl)

RESULT

{
  "data": [
    {
      "vgplayerurl": "//www.videogram.com/comic/6f949476-7650-4c17-b086-258dd9d0084d",
      "vgtitle": "Butterfly Kisses",
      "uuid": "6f949476-7650-4c17-b086-258dd9d0084d"
    }
  ]
}

{

"data": [

{

"vgplayerurl": "//www.videogram.com/comic/6f949476-7650-4c17-b086-258dd9d0084d",

"vgtitle": "Butterfly Kisses",

"uuid": "6f949476-7650-4c17-b086-258dd9d0084d"

}

]

}

VIDEOGRAM LIST API

OVERVIEW

This api returns all the videograms created by this user/api_key.

curl "http://www.videogram.com/api/channel/get/videos/?api_key={your api key}&offset=0&limit=10&fields=data(uuid,vgtitle,vgplayerurl,album_published_at)"

1	curl "http://www.videogram.com/api/channel/get/videos/?api_key={your api key}&offset=0&limit=10&fields=data(uuid,vgtitle,vgplayerurl,album_published_at)"

DESCRIPTION

Request Type : GET (all parameters required)
Accepts: text/plain
Returns: application/json
Parameters:

api_key: 1234abcd-e56f-4789-0123-456789abcdef
offset: 0 (Start at this value if you want to do list paging)
limit: 10 ( you get this many items back )

RESPONSE

200 : Ok + detailed info in JSON format. See below for example
400 : Bad Request
403 : Forbidden ( i.e. bad / missing api key )
500 : Internal Server Error

400 series responses include details in JSON format.
500 series responses contain no useful information in the response body.

EXAMPLE:

curl "http://www.videogram.com/api/channel/get/videos/?api_key={api_key}&offset=0&limit=10&fields=data(uuid,vgtitle,vgplayerurl,album_published_at)"

1	curl "http://www.videogram.com/api/channel/get/videos/?api_key={api_key}&offset=0&limit=10&fields=data(uuid,vgtitle,vgplayerurl,album_published_at)"

RESULT

{
  "data": [
    {
      "album_published_at": "May 19, 2017 7:00:13 AM",
      "vgplayerurl": "//www.videogram.com/embed/037325b7-a19c-4069-b58c-1c809ad0f5de",
      "vgtitle": "The iMom",
      "uuid": "037325b7-a19c-4069-b58c-1c809ad0f5de"
    },
    {
      "album_published_at": "Apr 30, 2017 11:03:09 AM",
      "vgplayerurl": "//www.videogram.com/embed/f9f200dd-aa1a-4d57-bf14-f8e35d03acb0",
      "vgtitle": "I\u0027m here .....",
      "uuid": "f9f200dd-aa1a-4d57-bf14-f8e35d03acb0"
    },
    {
      "album_published_at": "May 20, 2015 7:34:14 AM",
      "vgplayerurl": "//www.videogram.com/embed/6f949476-7650-4c17-b086-258dd9d0084d",
      "vgtitle": "https://youtube.com/devicesupport",
      "uuid": "6f949476-7650-4c17-b086-258dd9d0084d"
    }
  ]
}

{

"data": [

{

"album_published_at": "May 19, 2017 7:00:13 AM",

"vgplayerurl": "//www.videogram.com/embed/037325b7-a19c-4069-b58c-1c809ad0f5de",

"vgtitle": "The iMom",

"uuid": "037325b7-a19c-4069-b58c-1c809ad0f5de"

{

"album_published_at": "Apr 30, 2017 11:03:09 AM",

"vgplayerurl": "//www.videogram.com/embed/f9f200dd-aa1a-4d57-bf14-f8e35d03acb0",

"vgtitle": "I\u0027m here .....",

"uuid": "f9f200dd-aa1a-4d57-bf14-f8e35d03acb0"

{

"album_published_at": "May 20, 2015 7:34:14 AM",

"vgplayerurl": "//www.videogram.com/embed/6f949476-7650-4c17-b086-258dd9d0084d",

"vgtitle": "https://youtube.com/devicesupport",

"uuid": "6f949476-7650-4c17-b086-258dd9d0084d"

}

]

}

VIDEOGRAM GRID API

OVERVIEW

Returns the 2-dimensional grid for a given width and height

DESCRIPTION

Request Type : GET (all parameters required)
Accepts: application/x-www-form-urlencoded
Returns : application/json
Parameters:

uuid: 1234abcd-e56f-4789-0123-456789abcdef
width: Width of the grid
height: Height of the grid
frame_count: Frame count and Width+Height are mutually exclusive parameters. If frame_count is ZERO only then widh and height is used. If frame count is NON-ZERO then it will return the grid with these many frames.

RESPONSE

200 : Ok + detailed info in JSON format. see below for example
400 : Bad Request
403 : Forbidden ( i.e. bad / missing uuid )
500 : Internal Server Error

400 series responses include details in JSON format.
500 series responses contain no useful information in the response body.

EXAMPLE:

curl "http://www.videogram.com/api/list/videogram/?uuid=91fccaa7-f565-4190-b135-d222a0594887&width=900&height=500&frame_count=0&grid=true&fields=data(grid,remote_album_id,album_network)"

1	curl "http://www.videogram.com/api/list/videogram/?uuid=91fccaa7-f565-4190-b135-d222a0594887&width=900&height=500&frame_count=0&grid=true&fields=data(grid,remote_album_id,album_network)"

VIDEOGRAM GRID OUTPUT

{
  "data": [
    {
      "album_network": "YOUTUBE",
      "remote_album_id": "pezrS5OBBs4",
      "grid": {
        "uuid": "91fccaa7-f565-4190-b135-d222a0594887",
        "width": 300.0,
        "height": 300.0,
        "aspect": 1.7777778,
        "frame_base_url": "https://d1tw8t3o8307lr.cloudfront.net/comic/album/3bbc8ddb-ac41-493f-a76e-955d33a3115f/%d/%08s.jpg",
        "duration": 139000,
        "gif_url": "https://videogram.s3.amazonaws.com/comic/album/3bbc8ddb-ac41-493f-a76e-955d33a3115f/thumbnail/best.gif",
        "frames": [
          
        ],
        "elements": [
          {
            "seg_id": 4000,
            "original_seg_id": 4000,
            "element_type": "NONE",
            "url": "https://d1tw8t3o8307lr.cloudfront.net/comic/album/3bbc8ddb-ac41-493f-a76e-955d33a3115f/3/00004000.jpg",
            "open_type": "NONE",
            "width": 300.0,
            "height": 179.6,
            "left": 0.0,
            "top": 0.0,
            "time": 4000,
            "frames": [
              
            ],
            "score": 3
          },
          {
            "seg_id": 26333,
            "original_seg_id": 26333,
            "element_type": "NONE",
            "url": "https://d1tw8t3o8307lr.cloudfront.net/comic/album/3bbc8ddb-ac41-493f-a76e-955d33a3115f/1/00026333.jpg",
            "open_type": "NONE",
            "width": 99.3,
            "height": 59.2,
            "left": 0.0,
            "top": 180.6,
            "time": 26333,
            "frames": [
              
            ],
            "score": 1
          },
          {
            "seg_id": 37958,
            "original_seg_id": 37958,
            "element_type": "NONE",
            "url": "https://d1tw8t3o8307lr.cloudfront.net/comic/album/3bbc8ddb-ac41-493f-a76e-955d33a3115f/1/00037958.jpg",
            "open_type": "NONE",
            "width": 99.3,
            "height": 59.2,
            "left": 0.0,
            "top": 240.8,
            "time": 37958,
            "frames": [
              
            ],
            "score": 1
          },
          {
            "seg_id": 68500,
            "original_seg_id": 68500,
            "element_type": "NONE",
            "url": "https://d1tw8t3o8307lr.cloudfront.net/comic/album/3bbc8ddb-ac41-493f-a76e-955d33a3115f/2/00068500.jpg",
            "open_type": "NONE",
            "width": 199.7,
            "height": 119.4,
            "left": 100.3,
            "top": 180.6,
            "time": 68500,
            "frames": [
              
            ],
            "score": 2
          }
        ]
      }
    }
  ]
}

{

"data": [

{

"album_network": "YOUTUBE",

"remote_album_id": "pezrS5OBBs4",

"grid": {

"uuid": "91fccaa7-f565-4190-b135-d222a0594887",

"width": 300.0,

"height": 300.0,

"aspect": 1.7777778,

"frame_base_url": "https://d1tw8t3o8307lr.cloudfront.net/comic/album/3bbc8ddb-ac41-493f-a76e-955d33a3115f/%d/%08s.jpg",

"duration": 139000,

"gif_url": "https://videogram.s3.amazonaws.com/comic/album/3bbc8ddb-ac41-493f-a76e-955d33a3115f/thumbnail/best.gif",

"frames": [

"elements": [

{

"seg_id": 4000,

"original_seg_id": 4000,

"element_type": "NONE",

"url": "https://d1tw8t3o8307lr.cloudfront.net/comic/album/3bbc8ddb-ac41-493f-a76e-955d33a3115f/3/00004000.jpg",

"open_type": "NONE",

"width": 300.0,

"height": 179.6,

"left": 0.0,

"top": 0.0,

"time": 4000,

"frames": [

"score": 3

{

"seg_id": 26333,

"original_seg_id": 26333,

"element_type": "NONE",

"url": "https://d1tw8t3o8307lr.cloudfront.net/comic/album/3bbc8ddb-ac41-493f-a76e-955d33a3115f/1/00026333.jpg",

"open_type": "NONE",

"width": 99.3,

"height": 59.2,

"left": 0.0,

"top": 180.6,

"time": 26333,

"frames": [

"score": 1

{

"seg_id": 37958,

"original_seg_id": 37958,

"element_type": "NONE",

"url": "https://d1tw8t3o8307lr.cloudfront.net/comic/album/3bbc8ddb-ac41-493f-a76e-955d33a3115f/1/00037958.jpg",

"open_type": "NONE",

"width": 99.3,

"height": 59.2,

"left": 0.0,

"top": 240.8,

"time": 37958,

"frames": [

"score": 1

{

"seg_id": 68500,

"original_seg_id": 68500,

"element_type": "NONE",

"url": "https://d1tw8t3o8307lr.cloudfront.net/comic/album/3bbc8ddb-ac41-493f-a76e-955d33a3115f/2/00068500.jpg",

"open_type": "NONE",

"width": 199.7,

"height": 119.4,

"left": 100.3,

"top": 180.6,

"time": 68500,

"frames": [

"score": 2

}

]

}

]

}

NOTES

time: Time returned is in milli seconds
remote_album_id: Id of the video if the video is of a network which is integrated by Videogram. Else Url of the video
album_network: Video network

VIDEOGRAM EMBED CODE

Embed urls can be made simply by replacing the uuid below with the value returned in create videogram api and also support autoplay. Standard embed iframe code looks like this

<iframe 
    src="//www.videogram.com/embed/{uuid}"
    width="100%" 
    style="max-width:
    800px;"
    height="800"
    scrolling="no"
    allowfullscreen webkitallowfullscreen mozallowfullscreen
></iframe>

<iframe

src="//www.videogram.com/embed/{uuid}"

width="100%"

style="max-width:

800px;"

height="800"

scrolling="no"

allowfullscreen webkitallowfullscreen mozallowfullscreen

></iframe>

You must declare width and height, but you don’t have to do it inline. Heights such as 80vh work quite well, and the width in the above example allows the embed to flex with the page.

Recommended Grid Processing

This example is written in Javascript. The functions processError and formatTime are not included.

function processGridResponse( response ) {

  // call with the complete output of the Videogram Grid API

  if( ! response || ! response.grid || ! response.grid.elements.length )
    return processError( response );

  var i, l, html = '',
    f = response.grid.elements;

  for( i = 0, l = f.length; i < l; i ++ ) {
    html += keyframeTemplate( f[ i ] );
  }
  return html;
}

function keyframeTemplate( obj ) {

/**
 * <i> is network tags
 * <b> is time, icons etc
 * <em> is cover filter
 *
 */

  var html = ''
    + '<li' + ' class="seg_id-%seg_id%"' + ' data-seg_id="%seg_id%"' + ' style="width: %width%px; height: %height%px; top: %top%px; left: %left%px"' + '><s></s>'
    + '<a href="#"> </a>'
    + '<b>%seg_id_hr%</b>'
    + '<i></i>'
    + ''
    + '</em></b></i>

function processGridResponse( response ) {

// call with the complete output of the Videogram Grid API

if( ! response || ! response.grid || ! response.grid.elements.length )

return processError( response );

var i, l, html = '',

f = response.grid.elements;

for( i = 0, l = f.length; i < l; i ++ ) {

html += keyframeTemplate( f[ i ] );

}

return html;

}

function keyframeTemplate( obj ) {

/**

* is network tags

* is time, icons etc

* is cover filter

var html = ''

+ '<li' + ' class="seg_id-%seg_id%"' + ' data-seg_id="%seg_id%"' + ' style="width: %width%px; height: %height%px; top: %top%px; left: %left%px"' + '><s></s>'

+ '<a href="#"> </a>'

+ '%seg_id_hr%'

+ ''

+ ''

+ '

‘ ; return html .replace(‘%top%’ , obj.top ) .replace(‘%left%’ , obj.left ) .replace(‘%width%’ , obj.width ) .replace(‘%height%’ , obj.height ) .replace(‘%kfurl%’ , obj.url ) .replace(/%seg_id%/g , obj.seg_id ) .replace(‘%seg_id_hr%’ , formatTime( obj.seg_id / 1000 ) ) }

Recommended Base CSS

  ul {
    list-style-type: none;
    overflow       : hidden;
    position       : relative;
  }

  li { list-style-type: none !important; }

  li, a, b, i, s, em, img {
    border  : none !important;
    display : block;
    margin  : 0 !important;
    padding : 0 !important;
    position: absolute;
    }

  s, a, em {
    height         : 100%;
    left           : 0;
    text-decoration: none;
    top            : 0;
    width          : 100%;
  }

  s  { z-index: 10; background-size: cover; background-position: 50%; }
  b  { z-index: 20; }
  i  { z-index: 30; }
  em { z-index: 40; }
  a  { z-index: 50; }

  b {
    bottom     : 2px;
    color      : white;
    font-size  : 10pt;
    font-weight: 300;
    left       : 2px;
    text-shadow: black 0 0 5px;
    }
  
  li:hover { outline-color: blue; }

ul {

list-style-type: none;

overflow : hidden;

position : relative;

}

li { list-style-type: none !important; }

li, a, b, i, s, em, img {

border : none !important;

display : block;

margin : 0 !important;

padding : 0 !important;

position: absolute;

}

s, a, em {

height : 100%;

left : 0;

text-decoration: none;

top : 0;

width : 100%;

}

s { z-index: 10; background-size: cover; background-position: 50%; }

b { z-index: 20; }

i { z-index: 30; }

em { z-index: 40; }

a { z-index: 50; }

b {

bottom : 2px;

color : white;

font-size : 10pt;

font-weight: 300;

left : 2px;

text-shadow: black 0 0 5px;

}

li:hover { outline-color: blue; }

One-time Videogram Creation:	2,500 Credits
1,000 Servings of Videogram (1 CPM):	100 Videogram Credits

Videogram Upload And List Api

VIDEOGRAM CREATE API

OVERVIEW

Prerequisites:

DESCRIPTION

RESPONSE

EXAMPLE:

RESULT

VIDEOGRAM LIST API

OVERVIEW

DESCRIPTION

RESPONSE

EXAMPLE:

RESULT

VIDEOGRAM GRID API

OVERVIEW

DESCRIPTION

RESPONSE

EXAMPLE:

VIDEOGRAM GRID OUTPUT

NOTES

VIDEOGRAM EMBED CODE

Recommended Grid Processing

Recommended Base CSS

Recent Posts

Archives