Ad Player - Widgets Documentation

The Triton Ad Player Widget allows publishers to easily play on-demand audio or video ads. The Ad Player Widget can be used in conjunction with Triton Digital's Media Player Widget, or with a third-party media player.

Features

Triton Ad Platform (Tap) - Plays Triton audio or video ads right out of the box
Companion Banners - Displays companion banners to accompany your audio or video ads
Display options - Play audio or video ads in a page overlay, or within a container on the page

For more information about the Triton Ad Platform, visit TritonDigital.com.

For more information on the global and regional CMOD endpoints, click here.

Prerequisite

Before adding the ad player element to your pages, you’ll need to add the following code snippet (JavaScript) to the bottom of your page or site template. This is the same JavaScript snippet that is used with the TD Media Player widget; if you’ve already added the Media Player Widget then you don’t need to add this snippet again. If you are using the Ad Player Widget with a third-party media player, then you must add the JavaScript snippet.

<script src="//widgets.listenlive.co/1.0/tdwidgets.min.js"></script>

Triton is not accountable for providing website development professional services and expertise on Wordpress theme customizations. Identifying where and in which .php file of the Wordpress theme the Triton widget code should be added is the client’s responsibility. For more information, please visit support.TritonDigital.com

Script Tag Attributes

Parameter	Description	Default	Required
td-lang	Language. Supported values : en (English), es (Spanish), pt (Portuguese), fr (French)	en	none

The Ad Player Widget has its own element and can be included anywhere in your page.

Use the attributes below to configure and customize your widget to suit your needs.

Configuration

Attributes With Vast Client (ex: a2x)

Parameter	Description	Default	Required
id	Element ID for internal reference.	none	yes
client	This value must be "vast".	none	yes
tag	This value must be a ad server URL	none	yes
mode	The display mode for the ads. Can either be "theater", "embedded", "player"	theater	no
tdcontainer	The id of the element in which the ads will be displayed. Only available for "embedded" mode. (See Note 1)	none	no
playerid	The id of the "td-player" element in which the preroll will be displayed. Only available in "player" mode.	none	no
mediumrectangle	The id of the element in which the medium-rectangle companion banner will be displayed. Only available in "embedded" and "player" mode.	none	no
leaderboard	The id of the element in which the leaderboard companion banner will be displayed. Only available in "embedded" and "player" mode.	none	no

Attributes With Runspot Client

Parameter	Description	Default	Required
id	Element ID for internal reference.	none	yes
client	This value must be "runspot".	none	yes
sid	TritonRunSpot Station Id	none	yes
mediaformat	Optional value for TritonRunSpot API content format.	21	no
mode	The display mode for the ads. Can either be "theater", "embedded", "player"	theater	no
tdcontainer	The id of the element in which the ads will be displayed. Only available for "embedded" mode. (See Note 1)	none	no
playerid	The id of the "td-player" element in which the preroll will be displayed. Only available in "player" mode.	none	no
mediumrectangle	The id of the element in which the medium-rectangle companion banner will be displayed. Only available in "embedded" and "player" mode.	none	no
leaderboard	The id of the element in which the leaderboard companion banner will be displayed. Only available in "embedded" and "player" mode.	none	no

Attributes With Tap Client

Parameter	Description	Default	Required
id	Element ID for internal reference.	none	yes
client	This value must be "tap".	none	yes
mode	The display mode for the ads. Can either be "theater", "embedded", "player"	theater	no
tdcontainer	The id of the element in which the ads will be displayed. Only available for "embedded" mode. (See Note 1)	none	no
playerid	The id of the "td-player" element in which the preroll will be displayed. Only available in "player" mode.	none	no
mediumrectangle	The id of the element in which the medium-rectangle companion banner will be displayed. Only available in "embedded" and "player" mode.	none	no
leaderboard	The id of the element in which the leaderboard companion banner will be displayed. Only available in "embedded" and "player" mode.	none	no
host	Contact Triton Digital Customer Support to obtain the correct On-Demand Ad Service Host name to use.	none	yes
type	The ad type; it can be preroll or midroll.	none	yes
stationname or stationid	Your station name or station ID	none	yes
format	The rendering format; it can be vast, vast-json, or daast.	vast	no
maxads	Maximum number of ads. Must be an integer value.	1	no
assettype	List of asset types. Comma-separated values, can be audio or video.	none	no
minfilesize	Minimum file size. Must be an integer value in kb.	none	no
maxfilesize	Maximum file size. Must be an integer value in kb.	none	no
fileformat	List of containers, in comma-separated values. Can be mp3, adts, flv, mp4, ogg.	none	no
minduration	Minimum duration in seconds. Must be an integer value.	none	no
maxduration	Maximum duration in seconds. Must be an integer value.	none	no
minbitrate	Minimum bitrate in kbps. Must be an integer.	none	no
maxbitrate	Maximum bitrate in kbps. Must be an integer.	none	no
minwidth	Minimum width in pixels. Must be an integer.	none	no
maxwidth	Maximum width in pixels. Must be an integer.	none	no
minheight	Minimum height in pixels. Must be an integer.	none	no
maxheight	Maximum height in pixels. Must be an integer.	none	no
audiocodec	List of audio codecs in comma-separated values. Can be mp3,aac_hev1, aac_hev2, aac_lc, vorbis.	none	no
audiominchannels	Minimum audio channels. Must be an integer.	none	no
audiomaxchannels	Maximum audio channels. Must be an integer.	none	no
audiosamplerates	List of audio sample rates in Hz.	none	no
videocodec	List of video codecs. Can be in h264 or on2_vp6.	none	no
videoaspectratio	List of ratios. Can be 4:3, 16:9, other.	none	no
minframerate	Minimum frame rate per second. Must be a float.	none	no
maxframerate	Maximum frame rate per second. Must be a float.	none	no
excludedcategories	List of IAB categories to exclude. This is only available with a2x ads. Must be presented as comma-separated category codes. You can find the codes here: http://www.iab.net/media/file/OpenRTB_API_Specification_Version2.0_FINAL.PDF	none	no

Notes:

In order to display an ad correctly, the tdcontainer element must have the CSS property position set to relative.

Callbacks

Listing of events dispatched by player widget to which you can assign a callback.

Event name	Description	data
onappready	Widget application ready	widget object instance
onadstart	On-demand ad start playing	none
onadcomplete	Ad is completed	none
onaderror	Error occurred during ad loading or ad playing	none
onadblockerdetected	Ad was blocked by an ad blocker	none

Callback example

<td-adplayer id="td-adplayer"
         client="tap"
         host="cmod-world.live.streamtheworld.com"
         stationid="93553"
         type="preroll"
         onappready="appReady"
         onadcomplete="adComplete"
           >
</td-adplayer>

<script>

    var widgetAdPlayer;

    //onappready callback function
    function appReady( widgetObjectInstance ){
        widgetAdPlayer = widgetObjectInstance;
    }

    //receive onadcomplete  callback
    function adComplete(){

    }

</script>

Triggers

Listing of all triggers you can use. Currently there is only one.

All triggers are accessible only when the widget is properly initialized. Use the onappready widget attribute to assign a callback function in order to get the widget object. All triggers can be accessed via this widget object. E.g.: object.trigger( '<name>', options);

Name	Description	Options
playAd	Trigger used to start an Ad	{ `<Tap Client config object>` }

Note: If you don't pass tap client config object in the "playAd" trigger, td-adplayer widget attributes are used. If no td-adplayer widget attributes are defined the "playAd" function is ignored.

Trigger example

<td-adplayer id="td-adplayer"
         client="tap"
         host="cmod-world.live.streamtheworld.com"
         stationid="93553"
         type="preroll"
         onappready="appReady"
         onadcomplete="adComplete"
           >
</td-adplayer>

<script>

    var widgetAdPlayer;

    //onappready callback function
    function appReady( widgetObjectInstance ){
        widgetAdPlayer = widgetObjectInstance;

        //Trigger example
        widgetAdPlayer.trigger( 'playAd' )

    }


</script>

Examples

This is a simple example of how to play audio or video ad with the Triton Media Player Widget.

<!doctype html>
<html>
<head>
    <title>Preroll with player widget</title>
</head>
<body>

<div style="float:left;width:650px;height:200px;" >

    <td-player
            id="td-player"
            type="med"
            defaultcoverart="//player.listenlive.co/templates/StandardPlayerV4/webroot/img/default-cover-art.png"
            highlightcolor="#013068"
            primarycolor="#fff"
            station="TRITONRADIOMUSIC"
            autostart="false"
            >
    </td-player>

</div>

<td-adplayer id="td-adplayer"
              client="tap"
             host="cmod-world.live.streamtheworld.com"
             stationid="93553"
             type="preroll"
              >
</td-adplayer>


<script src="//widgets.listenlive.co/1.0/tdwidgets.min.js"></script>


</body>
</html>

Advanced Examples

Preroll with Third-party player

This is an example of how to play a video ad with a third-party player. This example uses a SoundCloud widget to illustrate how this is done.

<!doctype html>
<html>
<head>
    <title>Preroll with Third Party Player</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="http://w.soundcloud.com/player/api.js"></script>
    <style>
        #soundcloud_widget{
            display:none;
        }
    </style>
</head>
<body>

<iframe id="soundcloud_widget"
        src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/177010594&show_artwork=false&liking=false&sharing=false"
        width="420"
        height="120"
        frameborder="no">
</iframe>

<td-adplayer id="td-adplayer"
             client="tap"
             host="cmod-world.live.streamtheworld.com"
             stationid="93553"
             type="preroll"
             onappready="appReady"
             onadcomplete="adComplete"
        >
</td-adplayer>


<script src="//widgets.listenlive.co/1.0/tdwidgets.min.js"></script>

<script>
    var adPlayed = false;
    var prerollWidget;

    //Get the Soundcloud Widget API
    var soundcloud = SC.Widget(document.getElementById('soundcloud_widget'));

    //bind soundcloud play click event -- https://developers.soundcloud.com/docs/api/html5-widget
    soundcloud.bind(SC.Widget.Events.PLAY ,function(){

    //play the ad if the ad wasn't played
    if(!adPlayed){

        //pause the custom player
        soundcloud.pause();

        //notify the preroll widget to play the ad
        prerollWidget.trigger('playAd');

        //change status to ad was played
        adPlayed= true;
    }

    })

    //appReady called when preroll was initialized
    function appReady( widgetObjectInstance ){
        //show third party player only when preroll widget is ready
        $('#soundcloud_widget').show();
        prerollWidget = widgetObjectInstance;
    }

    //start custom player after the ad was completed
    function adComplete(){
        soundcloud.seekTo(0);
        soundcloud.play();
    }


</script>



</body>
</html>

Lets break it down...

Third-party player

Embed your third-party player in your page. In this example, we use Soundcloud's player widget.

<iframe id="soundcloud_widget"
    src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/177010594&show_artwork=false&liking=false&sharing=false"
    width="420"
    height="120"
    frameborder="no">
</iframe>

Ad Player Widget

Add the Triton Ad Player Widget element with the attributes you want. In this case the most important attributes to add are onappready and onadcomplete. These two attributes are callbacks for the Ad Player Widget’s custom function.

<td-adplayer id="td-adplayer"
             client="tap"
             host="cmod-world.live.streamtheworld.com"
             stationid="93553"
             type="preroll"
             onappready="appReady"
             onadcomplete="adComplete"
        >
</td-adplayer>

TD Widgets Library

Add the JavaScript embed that initiates Triton's widgets

<script src="//widgets.listenlive.co/1.0/tdwidgets.min.js"></script>

Custom code

1- Initialize your variables

var adPlayed = false;
var prerollWidget;

2- Get the Soundcloud Widget API

var soundcloud = SC.Widget(document.getElementById('soundcloud_widget'));

3- Bind soundcloud play click event -- more details at https://developers.soundcloud.com/docs/api/html5-widget

soundcloud.bind(SC.Widget.Events.PLAY ,function(){

    //play the ad if the ad wasn't played
    if(!adPlayed){

        //pause the custom player
        soundcloud.pause();

        //notify the preroll widget to play the ad
        prerollWidget.trigger('playAd');

        //change status to ad was played
        adPlayed= true;
    }

})

4- appReady called when Ad Player Widget is initialized

    function appReady( widgetObjectInstance ){
        $('#soundcloud_widget').show();
        prerollWidget = widgetObjectInstance;
    }

5- Start third-party player after the ad is played

function adComplete(){
    soundcloud.seekTo(0);
    soundcloud.play();
}

Keys	Action
`?`	Open this help
`n`	Next page
`p`	Previous page
`s`	Search

Ad Player Widget

Features

Prerequisite

Script Tag Attributes

Configuration

Attributes With Vast Client (ex: a2x)

Attributes With Runspot Client

Attributes With Tap Client

Notes:

Callbacks

Callback example

Triggers

Trigger example

Examples

Preroll With Triton Media Player Widget

Advanced Examples

Preroll with Third-party player

Lets break it down...

Third-party player

Ad Player Widget

TD Widgets Library

Custom code