Ad Player Widget

The Triton Ad Player Widget (beta) 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

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

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="http://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
renderingmode Choose your desired rendering mode for the ad; either "html5" and/or "flash". You can choose a single mode or specify a fallback by entering both; e.g.: "Html5,Flash" or "Flash,Html5" (if the first format isn't detected it will use the other as fallback). Html5,Flash 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 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
renderingmode Choose your desired rendering mode for the ad; either "html5" and/or "flash. You can choose a single mode or specify a fallback by entering both; e.g.: "Html5,Flash" or "Flash,Html5" (if the first format isn't detected it will use the other as fallback). Html5,Flash 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
renderingmode Choose your desired rendering mode for the ad; either "html5" and/or "flash". You can choose a single mode or specify a fallback by entering both; e.g.: "Html5,Flash" or "Flash,Html5" (if the first format isn't detected it will use the other as fallback). Html5,Flash 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
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:
  1. 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.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.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

Preroll With Triton Media Player Widget

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="http://playercdn.listenlive.co/templates/StandardPlayerV4/webroot/img/default-cover-art.png"
            highlightcolor="#013068"
            primarycolor="#fff"
            station="TRITONRADIOMUSIC"
            autostart="false"
            renderingmode="Html5,Flash"
            >
    </td-player>

</div>

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


<script src="http://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.live.streamtheworld.com"
             stationid="93553"
             type="preroll"
             onappready="appReady"
             onadcomplete="adComplete"
        >
</td-adplayer>


<script src="http://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.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="http://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();
}