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:
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
1 2 3 4 5 6 7 8 9 |
{ "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.
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:
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
{ "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:
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
{ "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
1 2 3 4 5 6 7 8 9 |
<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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
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> |
‘ ; 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
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; } |