Branding API

MetaCDN allows you to customise nearly every aspect of video delivery, allowing you to change the look and feel of the video player to integrate it seamlessly into your own website.

Create Branding template

HTTP Operation: POST
URL: POST https://secure.metacdn.com/api/users/{username}/branding
Auth: HTTP digest authentication (User)
"Content-Type" header: application/json
Expected HTTP response: HTTP/1.1 201 Created
Expected Format (mandatory, optional):

{
    "templateName": "Name o template",
    "description": "I am a template",
    "useHttpStreaming": true/false,
    "allowBitrateSelect": true/false,
    "useChromecast": true/false,
    "useThreeSixty": true/false,
    "clip": {
        "autoPlay": true/false,
        "autoBuffering": true/false,
        "scaling": "fit/half/orig/scale"
    },
    "contextMenu": [{
        "name": "ACMI Media Player 1.0.0"
    },{
        "name": "Go to Example.com",
        "location": "http:/www.example.com"
    }],
    "logo": {
        "url": "http://www.example.com/img/logo/logo.png",
        "fullscreenOnly": false/true,
        "displayTime": 5,
        "position": "TOP_LEFT/TOP_RIGHT/BOTTOM_LEFT/BOTTOM_RIGHT",
        "opacity": 0.5,
        "linkUrl": "http://www.example.com"
    },
    "canvas": {
        "backgroundColor": "33,33,33,1",
        "backgroundGradient": "none/low/medium/high"
    },
    "sharing": {
        "facebook": false/true,
        "twitter": false/true,
        "email": false/true,
        "embed": false/true,
        "buttons": {
            "color": "32,43,45,1",
            "overColor": "121,185,67,1"
        }
    },
    "controls": {
        "backgroundColor": "18,18,18,1",
        "backgroundGradient": "none/low/medium/high",
        "buttonColor": "229,230,232,1",
        "buttonOverColor": "121,185,67,1",
        "bufferGradient": "none/low/medium/high",
        "bufferColor": "0,145,170,1",
        "progressColor": "230,51,30,1",
        "progressGradient": "none/low/medium/high",
        "sliderColor": "121,185,67,1",
        "sliderGradient": "none/low/medium/high",
        "tooltipTextColor": "255,255,255,1",
        "tooltipColor": "121,185,67,1",
        "timeColor": "255,255,255,1",
        "timeBgColor": "18,18,18,1",
        "durationColor": "230,51,30,1"
    },
    "play": {
        "url": "http://www.example.com/assets/play.png",
        "width": 135,
        "height": 38,
        "opacity": 0.5
    }
}

Notes:

• "templateName" is the unique name you have given to your branding template.
• "description" is a longer textual description of your branding template.
• "useHttpStreaming" is set to true if you want to stream video over http (perhaps to get around firewall restrictions).
• "useChromecast" is set to true if you want to enable Chromecast streaming support in our video player.
• "useThreeSixty" is set to true if you want to enable support for 360 degree spherical video playback in our video player.
• "allowBitrateSelect" is set to true if you want to allow users to manually set their bitrates. False means bitrate is autoselected based on bandwidth.
• "clip" allows you to customise several kep aspects of video playback:
• "autoPlay" is a boolean value that designates whether the clip immediately plays upon loading.
• "autoBuffering" is a boolean value that designates whether loading of clip into player's memory should begin straight away.
• "scaling" is a setting which defines how video is scaled on the video screen. Available options are:
  • fit: Fit to window by preserving the aspect ratio encoded in the file's metadata.
  • half: Half-size (preserves aspect ratio)
  • orig: Use the dimensions encoded in the file. If the video is too big for the available space, the video is scaled using the 'fit' option.
  • scale: Scale the video to fill all available space. Ignores the dimensions in the metadata. This is the default setting.
• "contextMenu" is the the right-click menu that is shown when a user right-clicks the player with the mouse. You can customise the text that appears in this menu and even have links. A list of "name" and "location" entries can be provided:
• "name" is the text that will appear. A "-" as name of an context menu entry will result in a separator to be added.
• "location" is the hyperlink associated with a given "name".
• "logo" allows you to overlay your own logo image on the video player interface:
• "url" is location of the logo you wish to overlay.
• "fullscreenOnly" is boolean value that designates whether the logo is shown only when the player interface is in full screen mode.
• "displayTime" is the amount of time (in seconds) that the logo is displayed before disappearing. A value of 0 will show the logo forever.
• "position" designate the position of the logo on the player interface.
• "opacity" is the degree of transparency or translucence of the logo (between 0 and 1).
• "linkUrl" is the hyperlink that is used when a user clicks on the logo.
• "canvas" allows you to customise the color and gradient of the video player canvas:
• "backgroundColor" is a hex color value designating the color of the player canvas.
• "backgroundGradient" is the degree of gradient (none, low, medium or high) applied to the player canvas.
• "sharing" allows you to customise the look and feel of the sharing video overlay:
• "facebook" toggles the facebook sharing option.
• "twitter" toggles the twitter sharing option.
• "email" toggles the email sharing option.
• "embed" toggles the embed sharing option.
• The "buttons" section allows customisation of the sharing buttons.
• The "color" option changes the color of the sharing icons.
• The "overColor" option changes the mouse-over color of the sharing icons.
• "controls" allows you to customise the look and feel of the control bar at the bottom of the player interface:
• "backgroundColor" is a hex color value designating the color of the control bar.
• "backgroundGradient" is the degree of gradient (none, low, medium or high) applied to the control bar.
• "buttonColor" is a hex color value designating the color of the button elements (e.g. play, mute, etc) on the control bar.
• "buttonOverColor" is a hex color value designating the mouseover color of the button elements (e.g. play, mute, etc) on the control bar.
• "bufferColor" is a hex color value designating the color of the buffered section of the seek bar.
• "bufferColorGradient" is the degree of gradient (none, low, medium or high) applied to the buffered section of the seek bar.
• "progressColor" is a hex color value designating the color of the progress section of the seek bar.
• "progressColorGradient" is the degree of gradient (none, low, medium or high) applied to the progress section of the seek bar.
• "sliderColor" is a hex color value designating the color of the the seek bar (excluding what has been covered by progress and buffer).
• "sliderColorGradient" is the degree of gradient (none, low, medium or high) applied to the the seek bar.
• "tooltipTextColor" is a hex color value designating the color of the text in any tool tip popups.
• "tooltipColor" is a hex color value designating the background color of any tool tip popups.
• "timeColor" is a hex color value designating the color of the text displaying the elapsed time.
• "timeBgColor" is a hex color value designating the background color of the component showing the elapsed time.
• "durationColor" is a hex color value designating the color of the text displaying the total time.
• "play" allows you to customise the play icon (this section is optional):
• "url" is location of the play button you wish to overlay.
• "width" is the width in pixels of the play button.
• "height" is the height in pixels of the play button.
• "opacity" is the degree of transparency or translucence of the play button (between 0 and 1).
• All color fields accept colors in the forms of RGBA (127,127,127,1), RGB (127,127,127) and HEX (#FFFFFF). The recommended form is RGBA as it allows alpha value to be set. If you choose to use RGB or HEX, the alpha value will be set to 1 by default. When retrieve a color field, the return format of color will always be converted into RGBA regardless what type you choose to pass in.

Example Call #1:

POST /api/users/mcdnuser/branding HTTP/1.1
Content-Type: application/json {
    "templateName": "APITemplate",
    "description": "A Fine Template, Suitable For Testing",
    "useHttpStreaming": false,
    "useChromecast": false,
    "useThreeSixty": false,
    "allowBitrateSelect": false,
    "clip": {
        "autoPlay": true,
        "autoBuffering": true,
        "scaling": "scale"
    },
    "contextMenu": [{
        "name": "MetaCDN Media Player 1.0.0"
    },{
        "name": "Go to MetaCDN.com",
        "location": "www.metacdn.com"
    }],
    "logo": {
        "url": "http://www.metacdn.com/img/logo/logo_bk.png",
        "fullscreenOnly": false,
        "displayTime": 5,
        "position": "TOP_LEFT",
        "opacity": 0.5,
        "linkUrl": "http://www.metacdn.com"
    },
    "canvas": {
        "backgroundColor": "33,33,33,1",
        "backgroundGradient": "medium"
    },
    "sharing": {
        "facebook": true,
        "twitter": true,
        "email": true,
        "embed": true,
        "buttons": {
            "color": "32,43,45,1",
            "overColor": "121,185,67,1"
        }
    },
    "controls": {
        "backgroundColor": "18,18,18,1",
        "backgroundGradient": "low",
        "buttonColor": "229,230,232,1",
        "buttonOverColor": "121,185,67,1",
        "bufferGradient": "none",
        "bufferColor": "0,145,170,1",
        "progressColor": "230,51,30,1",
        "progressGradient": "high",
        "sliderColor": "121,185,67,1",
        "sliderGradient": "medium",
        "tooltipTextColor": "255,255,255,1",
        "tooltipColor": "121,185,67,1",
        "timeColor": "255,255,255,1",
        "timeBgColor": "18,18,18,1",
        "durationColor": "230,51,30,1"
    },
    "play": {
        "url": "http://www.metacdn.com/img/icon/play.png",
        "width": 135,
        "height": 38,
        "opacity": 0.5
    }
}

Expected Response #1:

HTTP/1.1 201 Created
Content-Type: text/plain; charset=UTF-8
Date: Wed, 13 Oct 2010 03:03:05 GMT
Accept-Ranges: bytes
Server: Restlet-Framework/2.0.0
Vary: Accept-Charset, Accept-Encoding, Accept-Language, Accept
Content-Length: 22
Connection: close
Media branding created

Get Branding template

HTTP Operation: GET
URL: GET https://secure.metacdn.com/api/users/{username}/branding/{templateName}
Auth: HTTP digest authentication (User)
"Accept" header: application/json
Expected HTTP response: HTTP/1.1 200 OK
Expected Format (mandatory, optional):

GET /api/users/{username}/branding/{templateName} HTTP/1.1
Accept: application/json

Example Call #1:

GET /api/users/mcdnuser/branding/APITemplate HTTP/1.1
Accept: application/json

Expected Response #1:

HTTP/1.1 200 OK
Content-Type: application/json; charset=UTF-8
Date: Fri, 21 May 2010 02:15:03 GMT
Accept-Ranges: bytes
Server: Restlet-Framework/2.8
Vary: Accept-Charset, Accept-Encoding, Accept-Language, Accept
Content-Length: 2239
Connection: close {
    "canvas": {
        "backgroundColor": "33,33,33,1",
        "backgroundGradient": "medium"
    },
    "clip": {
        "autoBuffering": "true",
        "autoPlay": "true",
        "scaling": "scale"
    },
    "contextMenu": [{
        "location": "",
        "name": "MetaCDN Media Player 1.0.0"
    }, {
        "location": "www.metacdn.com",
        "name": "Go to MetaCDN.com"
    }],
    "useHttpStreaming":false,
    "useChromecast":false,
    "useThreeSixty":false,
    "allowBitrateSelect":false,
    "controls": {
        "backgroundColor": "18,18,18,1",
        "backgroundGradient": "low",
        "bufferColor": "0,145,170,1",
        "bufferGradient": "none",
        "buttonColor": "229,230,232,1",
        "buttonOverColor": "121,185,67,1",
        "durationColor": "230,51,30,1",
        "progressColor": "230,51,30,1",
        "progressGradient": "high",
        "sliderColor": "121,185,67,1",
        "sliderGradient": "medium",
        "timeBgColor": "18,18,18,1",
        "timeColor": "255,255,255,1",
        "tooltipColor": "121,185,67,1",
        "tooltipTextColor": "255,255,255,1"
    },
    "description": "A Fine Template, Suitable For Testing",
    "logo": {
        "Url": "http://www.metacdn.com/img/logo/logo_bk.png",
        "displayTime": 5,
        "fullscreenOnly": "false",
        "linkUrl": "http://www.metacdn.com",
        "opacity": 0.5,
        "position": "TOP_LEFT"
    },
    "play": {
        "height": 38,
        "opacity": 0.5,
        "url": "http://www.metacdn.com/img/icon/play.png",
        "width": 135
    },
    "sharing": {
        "buttons": {
            "color": "32,43,45,1",
            "overColor": "121,185,67,1"
        },
        "email": true,
        "embed": true,
        "facebook": true,
        "twitter": true
    },
    "templateName": "APITemplate"
}

Example Call #2:

GET /api/users/mcdnuser/branding HTTP/1.1
Accept: application/json

Expected Response #2:

HTTP/1.1 200 OK
Content-Type: application/json; charset=UTF-8
Date: Tue, 04 Jan 2011 03:25:36 GMT
Accept-Ranges: bytes
Server: Restlet-Framework/2.0.4
Vary: Accept-Charset, Accept-Encoding, Accept-Language, Accept
Content-Length: 97
Connection: close [{
    "description": "A Fine Template, Suitable For Testing",
    "templateName": "APITemplate"
}]

HTTP Operation:GET
URL: GET https://secure.metacdn.com/api/users/{username}/branding/{templateName}
Auth: HTTP digest authentication (User)
"Accept" header: text/plain, text/html
Expected HTTP response: HTTP/1.1 200 OK
Expected Format (mandatory, optional):

GET /api/users/{username}/branding/{templateName} HTTP /1.1 Accept: text/plain, text/html

Example Call #1:

GET /api/users/mcdnuser/branding/APITemplate HTTP /1.1 Accept: text/plain, text/html

Expected Response #1:

HTTP/1.1 200 OK
Content-Type: text/html; charset=UTF-8
Accept-Ranges: bytes
Vary: Accept-Charset, Accept-Encoding, Accept-Language, Accept
Date: Wed, 05 May 2010 01:35:17 GMT
Server: Google Frontend
Cache-Control: private, x-gzip-ok=""
Transfer-Encoding: chunked
<html>
<head>
<title>APITemplate</title>
.
.
.
</html>

Notes:

• The purpose of this call is to preview your branding template.
• The "Accept" header is set automatically by the user's browser and can vary depending on the browser type (Firefox, Internet Explorer, Safari, Chrome, etc).

Update Branding template

HTTP Operation:PUT
URL: PUT https://secure.metacdn.com/api/users/{username}/branding/{templateName}
Auth: HTTP digest authentication (User)
"Content-Type" header: application/json
Expected HTTP response: HTTP/1.1 202 Accepted
Expected Format (mandatory, optional):

PUT /api/users/{username}/branding/{templateName} HTTP/1.1
Content-Type: application/json {
    "description": "I am an updated template",
    "useHttpStreaming": true,
    "useChomecast": false,
    "useThreeSixty": false,
    "allowBitrateSelect": true,
    "clip": {
        "autoPlay": true/false,
        "autoBuffering": true/false,
        "scaling": "fit/half/orig/scale"
    },
    "contextMenu": [{
        "name": "ACMI Media Player 1.0.0"
    },{
        "name": "Go to Example.com",
        "location": "http:/www.example.com"
    }],
    "logo": {
        "url": "http://www.example.com/img/logo/logo.png",
        "fullscreenOnly": false/true,
        "displayTime": 5,
        "position": "TOP_LEFT/TOP_RIGHT/BOTTOM_LEFT/BOTTOM_RIGHT",
        "opacity": 0.5,
        "linkUrl": "http://www.example.com"
    },
    "canvas": {
        "backgroundColor": "33,33,33,1",
        "backgroundGradient": "none/low/medium/high"
    },
    "sharing": {
        "facebook": false/true,
        "twitter": false/true,
        "email": false/true,
        "embed": false/true,
        "buttons": {
            "color": "32,43,45,1",
            "overColor": "121,185,67,1"
        }
    },
    "controls": {
        "backgroundColor": "18,18,18,1",
        "backgroundGradient": "none/low/medium/high",
        "buttonColor": "229,230,232,1",
        "buttonOverColor": "121,185,67,1",
        "bufferGradient": "none/low/medium/high",
        "bufferColor": "0,145,170,1",
        "progressColor": "230,51,30,1",
        "progressGradient": "none/low/medium/high",
        "sliderColor": "121,185,67,1",
        "sliderGradient": "none/low/medium/high",
        "tooltipTextColor": "255,255,255,1",
        "tooltipColor": "121,185,67,1",
        "timeColor": "255,255,255,1",
        "timeBgColor": "18,18,18,1",
        "durationColor": "230,51,30,1"
    },
    "play": {
        "url": "http://www.example.com/icon/play.png",
        "width": 135,
        "height": 38,
        "opacity": 0.5
    }
}

Example Call #1:

PUT /api/users/demo/branding/MetaCDN HTTP/1.1
Content-Type: application/json {
    "useHttpStreaming": true,
    "useChromecast": false,
    "useThreeSixty": false,
    "allowBitrateSelect": true,
    "description": "An updated description",
    "clip": {
        "autoPlay": false,
        "autoBuffering": false,
        "scaling": "orig"
    },
    "contextMenu": [{
        "name": "MetaCDN Media Player 1.0.0"
    },{
        "name": "Go to MetaCDN.com",
        "location": "www.metacdn.com"
    }],
    "logo": {
        "url": "http://www.metacdn.com/img/logo/logo_bk.png",
        "fullscreenOnly": false,
        "displayTime": 5,
        "position": "TOP_LEFT",
        "opacity": 0.5,
        "linkUrl": "http://www.metacdn.com"
    },
    "canvas": {
        "backgroundColor": "33,33,33,1",
        "backgroundGradient": "medium"
    },
    "sharing": {
        "facebook": true,
        "twitter": true,
        "email": true,
        "embed": true,
        "buttons": {
            "color": "32,43,45,1",
            "overColor": "121,185,67,1"
        }
    },
    "controls": {
        "backgroundColor": "18,18,18,1",
        "backgroundGradient": "low",
        "buttonColor": "229,230,232,1",
        "buttonOverColor": "121,185,67,1",
        "bufferGradient": "none",
        "bufferColor": "0,145,170,1",
        "progressColor": "230,51,30,1",
        "progressGradient": "high",
        "sliderColor": "121,185,67,1",
        "sliderGradient": "medium",
        "tooltipTextColor": "255,255,255,1",
        "tooltipColor": "121,185,67,1",
        "timeColor": "255,255,255,1",
        "timeBgColor": "18,18,18,1",
        "durationColor": "230,51,30,1"
    },
    "play": {
        "url": "http://www.metacdn.com/img/icon/play.png",
        "width": 135,
        "height": 38,
        "opacity": 0.5
    }
}

Expected Response #1:

HTTP/1.1 202 Accepted
Content-Type: text/plain; charset=UTF-8
Date: Fri, 21 May 2010 02:20:22 GMT
Accept-Ranges: bytes
Server: Restlet-Framework/2.0.8
Vary: Accept-Charset, Accept-Encoding, Accept-Language, Accept
Content-Length: 26
Connection: close
Media branding is updating

Delete Branding template

HTTP Operation:DELETE
URL: DELETE https://secure.metacdn.com/api/users/{username}/branding/{templateName}
Auth: HTTP digest authentication (User)
Expected HTTP response: HTTP/1.1 202 Accepted
Expected Format (mandatory, optional):

DELETE /api/users/{username}/branding/{templateName} HTTP/1.1

Example Call #1:

DELETE /api/users/mcdnuser/branding/APITemplate HTTP/1.1

Expected Response #1:

HTTP/1.1 202 Accepted
Content-Type: text/plain; charset=UTF-8
Date: Fri, 21 May 2010 02:22:30 GMT
Accept-Ranges: bytes
Server: Restlet-Framework/2.0.8
Vary: Accept-Charset, Accept-Encoding, Accept-Language, Accept
Content-Length: 22
Connection: close
Media branding removed