How to embed THRON player into a web page

How to embed THRON player into a web page

[tab:Actions]

There are two ways to embed the player in a webpage:

 

  1. “Classic embed” requires calling a Javascript function to embed the player in a provided HTML <DIV> tag
  2. “iframe embed” requires adding an HTML <IFRAME> tag with a specific configuration.

 

Both ways handle:

  • User-agent detection (“is the player running on an iOS device?” “Does the browser support Flash player?”)
  • Loading and embedding the SWF player, or loading the content on the OS player
  • Dispatch of user-defined parameters and variables to the player.

 

Required information for both embed modes are:

  • [clientId] defines the customer’s platform area (for example “test”, “demo” and so on)
  • [contentId] is an alpha-numerical value which identifies the content in an unique way.
  • [pkey] is an alpha-numerical value which authenticates a specific embed. This is a required field needed to grant that only authorized embeds can play the content. Protected content will not be played when a valid secure code is missing. A valid secure code can be a website share id or an authentication token of a user to whom the content is shared. Instead of a pkey, a valid platform token can be used, and it can be generated usually via a loginApp request, be aware that a token might expire if not used for 60 minutes; you can keep the token "fresh" by invoking a validateToken request.

 

The embed code is currently compatible with the following browsers:

  • Internet Explorer 7 and later;
  • Firefox 3.5 and later;
  • Safari 4 and later;
  • Safari iOS 4 and later;
  • Chrome (all versions)

 

Latest browser version are highly recommended.

If you plan to use Internet Explorer 7 or 8, Adobe Flash Player is mandatory in order to see every content type, since these two browsers do not allow the use of modern html5 technologies.

 

Tips:

Especially when playing a video content, we suggest to provide standard dimensions for the <DIV> or <IFRAME> (for example 720x400 px when showing a video content in a 16:9 aspect ratio, or 720x576 px when showing 4:3 videos). In this way, Flash player plugin will take advantage of the video acceleration function provided by the underlying operating system. The minimum <DIV> or <IFRAME> size should be at least 160x160 pixels. With a smaller player, only the skin will be visible. Player's dimension must be provided.

 

NOTE: Flash Players with size lower than 400x300 pixels will be blocked both on Chrome and Safari browser. Therefore, if you intend to use Flash technology, you must consider using embed codes larger than this size. Minimum height is 420px when embedding a video or audio playlist, unless you set the "displayLinked" parameter to "none".  Minimum width is 640px when attachments are present; you can control them with the "displayDownload" parameter. Minimum width for DOCUMENT content type is 300px.

 

The flash based player can be executed only by computer running an “A-grade” browser with a Flash Player plugin. The minimum required Flash Player version is 10.3, but some problems may still occur with HTTP streaming content. Version 11 or later is highly recommended.

Additional parameters which can be added to your embed code can be found here.

[/tab] [tab:Code Samples] [dropdown:Classic embed]

Classic embeds need the inclusion of an embed script that must be loaded from the HTTP domain linked to the clientId; for example, the clientId “test” must load the Javascript file from the test-cdn.thron.com HTTP domain.

 

A <DIV> tag must be provided in which the player will be shown; this <DIV> must have the right dimensions (width, height). 

 

The physical embedding of the player needs the following parameters:

 

  • The link to the content to play
  • The name of the <DIV> in which the player must be embedded
  • The “parameters” object (see below)
  • An array containing one or more Google Analytics trackers’ ID

 

The parameters object contains many elements, some of which are optional. In particular, you might want to consider the inclusion of the "useContextId" parameter, which is particularly useful to identify tracking within the Intelligence. Further information on all the available parameters can be found in this article.

 

Depending on the detected user agent, if the link passed is a “getContentDetail” descriptor the embed code tries to load the correct content for the device.

The embed code will try to load the content most suitable with the architecture; for example, if the device is an iPhone the embed code will show the video with the Quicktime player (since Flash is not available on this platform). However, not all the devices (especially mobile ones) are supported at this time; attempting to play a video or a content on one of such devices will have the embed code invoke a function which can be used to notify the user that the embed is not possible.

This is an example of “Classic mode” embed which shows an on-demand video. A bold style highlights the points of attention.

 

<html>
<head> <script type="text/javascript" src="//[clientId]-cdn.thron.com/shared/player/current/scripts/embedscript-min.js"></script>
</head>
<body>
<div id="#divIDHere" style="width:640px; height:480px"></div>
<script>//<![CDATA[
THRONPlayer("#divIDHere", {media: "//[clientId]-view.thron.com/api/xcontents/resources/delivery/getContentDetail?clientId=[clientId]&xcontentId=[xcontentId]&pkey=[pkey]", embedCodeId: "[embedCodeId]",
displayLinked: "open",
displayDownload: "open",
noSkin: false,
autoPlay: false});
//]]></script>
</body>
</html>

 

The content embedding is defined in the script embedscript-min.js. If the page in which the content has to be embedded is particularly complex, we suggest to execute the embed from a function invoked in the onLoad page event manager; this means the embed will be executed only when all the page components have been loaded and initialized.

NOTE: The "id" of the <DIV> in which the player will be embedded can not start with a number, otherwise the skin will not load properly.

The contentUrl variable will contain the link to the content to be played. If this link contains query parameters (a list of attributes following the URL and encoded in a name=value style, separated from the URL by a question mark sign) it is mandatory to encode them before passing them to the function.

Usually, the content link provided by the admin console will be structured in this form:

 

//[clientId]-view.thron.com/api/xcontents/resources/delivery/getContentDetail?clientId=[clientId]&xcontentId=[contentId]&pkey=[pkey]

 

The player will select the most appropriate channel type for the device. To force playing a particular channel type you must use a content URL like this:

 

//[clientId]-view.thron.com/api/xcontents/resources/delivery/getContentDetail?clientId=[clientId]&xcontentId=[contentId]&pkey=[pkey]&channelType=[channel type]

 

The presence of a channelType parameter instructs the player to try and open the content for a specific architecture; for example, if [channel type] is STREAMHTTPFLASH the player will try to open a video compressed and repackaged for Flash HTTP streaming. However, if this parameter is not present, the player will detect the correct channel type for the device which is opening the content. When forcing a specific channel type, the content may not be visible on all devices. For example a STREAMHTTPFLASH content will not be available on a no-flash device. We suggest thus to use the first kind of content URL, unless you are really sure you want to limit content’s visualization on specific architectures for a specific channel type.

[/dropdown] [dropdown:Iframe embed]

For iframe embed you only have to add an iframe with the correct attributes to your web page.

 

The embed customization can be done using a custom Player style created within THRON Dashboard. This embed mode is currently poorer than the classic embed mode since it does not currently supply player customization.

 

This is an example of an iframe embed

 

<iframe id="iframeid" width="720" height="400" src="//[clientId]-cdn.thron.com/shared/player/current/embed/[clientId]/[contentId]/[pkey]" frameborder="0" allowfullscreen></iframe>

[/dropdown]

[dropdown:Classic embed using an application or a user token instead of the pkey]

<html>

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script type="text/javascript" src="//[clientId]-cdn.thron.com/shared/player/current/scripts/embedscript-min.js"></script>
</head>

<body>
    <!--First of all let's initiate a function which must be used to generate a valid token-->
    <script>
    //Let's create a variable to store the token
    var embedToken="";
    //Now let's invoke the API for the authentication (can be either an application or a platform user). For security reasons this request must be performed server side via PHP. Sample code is provided below.
     $.ajax({
            method: "GET",
            url: "<Your PHP address here>",
            success: function(data) {
                embedToken = data;
            //end let's use it in the function which we are going to invoke in order to embed the player
                embedPlayer();
            }
        });
    //let's now define the function used to embed the player, by providing the stored token instead of the pkey    
    var embedPlayer = function() {
            THRONPlayer("<divId here>", {
                media: "//[clientId]-view.thron.com/api/xcontents/resources/delivery/getContentDetail?clientId=[clientId]&xcontentId=[xcontentId]&pkey=" + embedToken,
                displayLinked: "none",
                displayDownload: "none",
                noSkin: false,
                autoPlay: false
            })
        };
 </script>
    <div id="<div Id here>" style="width:640px; height:480px"></div>
</body>
</html>

This is a sample of the server side PHP which has to be used to obtain the token.

In case you want to retrieve an application token:

<?php
$client_idTHRON = '<clientId here';
$app_id         = '<appId here>';
$app_key        = '<appKey here>';
$url            = "http://" . $client_idTHRON . "-view.thron.com/api/xadmin/resources/apps/loginApp/" . $client_idTHRON;
$request        = "appId=" . $app_id . "&appKey=" . $app_key;
$header         = array(
    "Content-Type: application/x-www-form-urlencoded"
);
$curl           = curl_init($url);
curl_setopt($curl, CURLOPT_HEADER, true);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
curl_setopt($curl, CURLOPT_POSTFIELDS, $request);
$curlRes     = curl_exec($curl);
$curlResInfo = curl_getinfo($curl);
curl_close($curl);
$resHeadersString = substr($curlRes, 0, $curlResInfo['header_size']);
$token            = substr($curlRes, $curlResInfo['header_size']);
// #########################################
// output
$data             = json_decode($token);
return $data->appUserTokenId;
?>

In case you want to retrieve a user token:

<?php
$client_idTHRON = '<clientId here>';
$username       = '<username here>';
$password       = '<password here>';
$url            = "http://" . $client_idTHRON . "-view.thron.com/api/xsso/resources/accessmanager/login/" . $client_idTHRON;
$request        = "username=" . $username . "&password=" . $password;
$header         = array(
    "Content-Type: application/x-www-form-urlencoded"
);
$curl           = curl_init($url);
curl_setopt($curl, CURLOPT_HEADER, true);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
curl_setopt($curl, CURLOPT_POSTFIELDS, $request);
$curlRes     = curl_exec($curl);
$curlResInfo = curl_getinfo($curl);
curl_close($curl);
$resHeadersString = substr($curlRes, 0, $curlResInfo['header_size']);
$token            = substr($curlRes, $curlResInfo['header_size']);
// #########################################
// output
$data             = json_decode($token);
echo $data->tokenId;
?>

[/dropdown][dropdown: iframe using an application or a user token instead of a pkey]

<html>

<head>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script type="text/javascript" src="//[clientId]-cdn.thron.com/shared/player/current/scripts/embedscript-min.js"></script>
</head>

<body>
  <!--First of all let's initiate a function which must be used to generate a valid token-->
  <script>
    //Let's create a variable to store the token
    var embedToken = "";
    //Now let's invoke the API for the authentication (can be either an application or a platform user). For security reasons this request must be performed server side via PHP. Sample code is provided below.
    $.ajax({
      method: "GET",
      url: "<some PHP here>",
      success: function(data) {
        embedToken = data;
        //end let's use it in the function which we are going to invoke in order to embed the player
        embedPlayer();
      }
    });
    //let's now define the function used to embed the player, by providing the stored token instead of the pkey    
    var embedPlayer = function() {
      var link = "//[clientId]-cdn.thron.com/shared/player/current/embed/[clientId]/[contentId]/"+ embedToken
      var iframe = document.createElement('iframe');
      iframe.frameBorder = 0;
      iframe.width = "800px";
      iframe.height = "600px";
      iframe.id = "iframeId";
      iframe.setAttribute("src", link);
      document.getElementById("[divId here]").appendChild(iframe);

    };
  </script>
  <div id="[divId here]" style="width:640px; height:480px"></div>
</body>

</html>

This is a sample of the server side PHP which has to be used to obtain the token.

In case you want to retrieve an application token:

<?php
$client_idTHRON = '<clientId here';
$app_id         = '<appId here>';
$app_key        = '<appKey here>';
$url            = "http://" . $client_idTHRON . "-view.thron.com/api/xadmin/resources/apps/loginApp/" . $client_idTHRON;
$request        = "appId=" . $app_id . "&appKey=" . $app_key;
$header         = array(
    "Content-Type: application/x-www-form-urlencoded"
);
$curl           = curl_init($url);
curl_setopt($curl, CURLOPT_HEADER, true);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
curl_setopt($curl, CURLOPT_POSTFIELDS, $request);
$curlRes     = curl_exec($curl);
$curlResInfo = curl_getinfo($curl);
curl_close($curl);
$resHeadersString = substr($curlRes, 0, $curlResInfo['header_size']);
$token            = substr($curlRes, $curlResInfo['header_size']);
// #########################################
// output
$data             = json_decode($token);
return $data->appUserTokenId;
?>

In case you want to retrieve a user token:

<?php
$client_idTHRON = '<clientId here>';
$username       = '<username here>';
$password       = '<password here>';
$url            = "http://" . $client_idTHRON . "-view.thron.com/api/xsso/resources/accessmanager/login/" . $client_idTHRON;
$request        = "username=" . $username . "&password=" . $password;
$header         = array(
    "Content-Type: application/x-www-form-urlencoded"
);
$curl           = curl_init($url);
curl_setopt($curl, CURLOPT_HEADER, true);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
curl_setopt($curl, CURLOPT_POSTFIELDS, $request);
$curlRes     = curl_exec($curl);
$curlResInfo = curl_getinfo($curl);
curl_close($curl);
$resHeadersString = substr($curlRes, 0, $curlResInfo['header_size']);
$token            = substr($curlRes, $curlResInfo['header_size']);
// #########################################
// output
$data             = json_decode($token);
echo $data->tokenId;
?>

 

[/dropdown]

[/tab]

Was this article helpful?
2 out of 2 found this helpful

Have more questions?

SUBMIT A REQUEST

Hai altre domande?

INOLTRA UNA RICHIESTA

Comments