Streamable provides a limited, read-only API for accessing video metadata in order to enable video playback. Web applications must use the embedded Streamable player while pre-approved native applications may render videos using signed video URLs.
Please note that video uploading, clipping, or editing is not supported by the Streamable API at this time. You are required to go to Streamable.com to perform those functions.
Embedding a video with oEmbed
In order to embed a video with oEmbed, you'll need to have the link of the video you'd like to embed. Then, send a GET request to the following endpoint with the video URL:
GET https://api.streamable.com/oembed.json{?url}
Here is an example request and response to retrieve an embed code:
REQUEST
curl https://api.streamable.com/oembed.json?
url=https://streamable.com/hn8hq
RESPONSE
{
"html": "<iframe class=\"streamable-embed\"
src=\"https://streamable.com/o/hn8hq\"
frameborder=\"0\" scrolling=\"no\" width=\"1280\"
height=\"720\" allowfullscreen>
</iframe>" ,
}
To embed the video, simply copy the unescaped value of the html field and paste it into your CMS or editor (such as WordPress).
NOTE: By default, the oEmbed endpoint will return the embed code using a fixed size iFrame with a default height and width, which you may adjust to fit your webpage. If you'd prefer to retrieve a responsive iFrame, you can use the GET /videos/ endpoint instead.
Querying a video with GET /videos/
In order to use the /videos/ endpoint, you'll need to have the shortcode of the video that you'd like to query. The shortcode is a unique string of characters that defines each video and trails the end of each video link.
Then, send a GET request to the following endpoint with the video shortcode:
GET https://api.streamable.com/videos/{shortcode}
Here is an example request and response on a video shortcode:
REQUEST
curl https://api.streamable.com/videos/hn8hq
RESPONSE
{
"status": 2,
"percent": 100,
"url": "streamable.com/hn8hq",
"embed_code": "<div style=\"width: 100%; height: 0px;
position: relative; padding-bottom: 56.25%;\"><iframe
class=\"streamable-embed\"
src=\"https://streamable.com/o/hn8hq\"
frameborder=\"0\" scrolling=\"no\" style=\"width: 100%;
height: 100%; position: absolute;\" allowfullscreen>
</iframe></div>" ,
"message": null,
"files": {
"mp4": {
"status": 2,
"url": "//cdn-b-east.streamable.com/video/mp4/hn8hq.mp4?token=EEioHptvKoLeACuujevHbQ&expires=1591923000",
"framerate": 30,
"height": 720,
"width": 1280,
"bitrate": 4607887,
"size": 14230108,
"duration": 24.002
},
"mp4-mobile": {
"status": 2,
"url": "//cdn-b-
east.streamable.com/video/mp4-mobile/hn8hq.mp4?token=YDcwufloEg8_KL0vnx4b6A&expires=1591923000" ,
"framerate": 30,
"height": 360,
"width": 640,
"bitrate": 1510573,
"size": 4746054,
"duration": 24.002
},
"original": {
"framerate": 29.97002997002997,
"bitrate": 10794301,
"size": 32763252,
"duration": 23.990633,
"height": 1080,
"width": 1920
}
},
"thumbnail_url": "//thumbs-
east.streamable.com/image/hn8hq.jpg?height=300" ,
"title": "Gravity Rush 2 - Lunar Style World Traversal",
"source": null
}
To embed the video, simply copy the unescaped value of the embed_code field and paste it into your CMS or editor (such as WordPress). The sizing of this code is responsive and it will adapt to your webpage width automatically.
If you are loading the Streamable video in a native environment and cannot use the embed code, you may use the signed URL links to render the video. Please note that these links expire automatically and cannot be hardcoded.
If you have any questions or concerns regarding the Streamable API, please visit our Support Center at streamableapp.zendesk.com for further assistance!
Comments
0 comments
Please sign in to leave a comment.