Embed Codes

How do I embed my content on my webpage using the API?

Now you’ve got content uploaded to your account, you’re going to want to provide your end users with an embed code they can use to display that content on their website or embed that content in your library.

👍
Our PHP SDK and Node SDK make getting embed codes for your content very simple and provide wrapper functions to perform all of the necessary steps from start to finish, only requiring you to set your API key, and pass the ID of the video content to generate the embed code for. If you are using one of these platforms, it is highly recommended to download and integrate the SDK to facilitate integration of all our API services into your application.

There are 3 different content types you can embed currently:

Videos
Channels
Playlists

There is a pair of endpoints for each of these content types that you can use to generate the embed codes for your video - one for Javascript and one for iFrame.

If you are accessing our API directly, with your API key, you’re going to make a GET request to

Videos: https://developer.dacast.com/v2/vod/{vodId}/embed/javascript for the Javascript embed code, and https://developer.dacast.com/v2/vod/{vodId}/embed/iframe for the iFrame embed code;
Channels: https://developer.dacast.com/v2/channel/{channelId}/embed/javascript for the Javascript embed code, and https://developer.dacast.com/v2/channel/{channelId}/embed/iframe for the iFrame embed code;
Playlists: https://developer.dacast.com/v2/playlist/{playlistId}/embed/javascript for the Javascript embed code, and https://developer.dacast.com/v2/playlist/{playlistId}/embed/iframe for the iFrame embed code.

You would replace {vodId}, {channelId} or {playlistId} in the above with the actual ID of the content you are getting the embed code for.

The rest of the page will use the vod endpoints but the same principles apply to channel and playlist endpoints.

For instance:

curl "https://developer.dacast.com/v2/vod/{vodId}/embed/javascript" \
  -H "X-Api-Key: insertYourApiKeyHere" \
  -H "X-Format: default"

var myHeaders = new Headers();
myHeaders.append("X-Api-Key", "insertYourApiKeyHere");
myHeaders.append("X-Format", "default");

var requestOptions = {
  method: 'GET',
  headers: myHeaders,
  redirect: 'follow'
};

fetch("https://developer.dacast.com/v2/vod/{vodId}/embed/javascript", requestOptions)
  .then(response => response.text())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

var https = require('follow-redirects').https;
var fs = require('fs');

var options = {
  'method': 'GET',
  'hostname': 'developer.dacast.com',
  'path': '/v2/vod/{vodId}/embed/javascript',
  'headers': {
    'X-Api-Key': 'insertYourApiKeyHere',
    'X-Format': 'default'
  },
  'maxRedirects': 20
};

var req = https.request(options, function (res) {
  var chunks = [];

  res.on("data", function (chunk) {
    chunks.push(chunk);
  });

  res.on("end", function (chunk) {
    var body = Buffer.concat(chunks);
    console.log(body.toString());
  });

  res.on("error", function (error) {
    console.error(error);
  });
});

req.end();

import requests

url = "https://developer.dacast.com/v2/vod/{vodId}/embed/javascript"

payload={}
headers = {
  'X-Api-Key': 'insertYourApiKeyHere',
  'X-Format': 'default'
}

response = requests.request("GET", url, headers=headers, data=payload)

print(response.text)

<?php

$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => 'https://developer.dacast.com/v2/vod/%7BvodId%7D/embed/javascript',
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => '',
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 0,
  CURLOPT_FOLLOWLOCATION => true,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => 'GET',
  CURLOPT_HTTPHEADER => array(
    'X-Api-Key: insertYourApiKeyHere',
    'X-Format: default'
  ),
));

$response = curl_exec($curl);

curl_close($curl);
echo $response;

OkHttpClient client = new OkHttpClient().newBuilder()
  .build();
Request request = new Request.Builder()
  .url("https://developer.dacast.com/v2/vod/{vodId}/embed/javascript")
  .method("GET", null)
  .addHeader("X-Api-Key", "insertYourApiKeyHere")
  .addHeader("X-Format", "default")
  .build();
Response response = client.newCall(request).execute();

The response body is in JSON and contains one property:

{"code":"\u003cscript id=\"d8c2dd79-6bd7-1b71-5d80-97608fec9df3-vod-c2ab561e-df32-ed16-7a0c-d7747862b28e\" width=\"100%\" height=\"100%\" src=\"https://player.dacast.com/js/player.js?contentId=d8c2dd79-6bd7-1b71-5d80-97608fec9df3-vod-c2ab561e-df32-ed16-7a0c-d7747862b28e\"  class=\"dacast-video\"\u003e\u003c/script\u003e"}

The response body contains all the HTML code needed to embed the content on your website now. The HTML entities are all escaped so you will need to unescape the response, but once unescaped, you will get your embed code.

You can unescape using e.g. javascript unescape function or Python’s html.unescape function out of the html module:

import html
entities = html.unescape('\u003cscript id=\"d8c2dd79-6bd7-1b71-5d80-97608fec9df3-vod-c2ab561e-df32-ed16-7a0c-d7747862b28e\" width=\"100%\" height=\"100%\" src=\"https://player.dacast.com/js/player.js?contentId=d8c2dd79-6bd7-1b71-5d80-97608fec9df3-vod-c2ab561e-df32-ed16-7a0c-d7747862b28e\"  class=\"dacast-video\"\u003e\u003c/script\u003e')
print(entities)

which would give:

<script id="d8c2dd79-6bd7-1b71-5d80-97608fec9df3-vod-c2ab561e-df32-ed16-7a0c-d7747862b28e" width="100%" height="100%" src="https://player.dacast.com/js/player.js?contentId=d8c2dd79-6bd7-1b71-5d80-97608fec9df3-vod-c2ab561e-df32-ed16-7a0c-d7747862b28e"  class="dacast-video"></script>

Now you’re done embedding your content, you may want to:

List Content That Belongs to a User
Update Video Metadata
Upload a Splashscreen and Thumbnail