How do I set-up my player page to display Synced Banners?

Search the Knowledgebase

Author: Jeremy Argue Reference Number: AA-00241 Views: 7150 Created: 2010-11-19 11:28

0 Rating/ Voters

The answer really depends on which CDN the station is using and who is providing the station’s player. If your station is using Triton Digital Streaming Services just follow the steps below. If your station is using another CDN, simply reach out to them and ask them to ensure that synced banners are configured to play in the player.

To enable your Triton Digital streaming player to display synced banners you must create a web page and embed the player and the proper banner code into that page. Then link to the new player page rather than to the player itself. If you link your web site directly to the player itself, the synced banner will not be able to display.

Here are the two supported methods of loading a player... if a client just does a "view source" and copy paste the generated code into their web page we can't guarantee that the player will be reliable and will always work. However, if the player is called using the proper embed code, then what is embedded and how can be controlled by the settings of the embed page.

Method 1 - JavaScript Embed

To Embed the player into a page all you need to do is add the following code the <Body> of the HTML page:
<script src="http://player.streamtheworld.com/liveplayer.php?template=js&callsign=SONETT77" type="text/javascript" language="javascript"></script>

Method 2 - IFrame Embed

Alternatively, stations can use an iFrame rather than JavaScript to embed a player into a page. The iFrame code should look like this:
<iframe src="http://player.streamtheworld.com/liveplayer.php?callsign=SONETT77" width="890" height="638" scrolling="no" frameborder="0" marginheight="0" marginwidth="0" style="margin: 0; padding: 0;" allowtransparency="true"></iframe>

Note: size must be manually adjusted if the player is changed.

Embed Campaign Manager synchronized banners with a live player:

1- Create a new blank HTML page using an HTML editor. This is the page you will upload on your website as the page containing the live player.
2- Add the following code to your HTML page to embed the player: (the example below can be used for a live player containing only one big box without leaderboard).

Make sure you replaced the [CALLSIGN_HERE] by your correct CALLSIGN.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1" />
<title>Streamtheworld Live Player</title>
</head>

<!--
body {
background-color: FFFFFF;
margin: 0;
}

#flashPlayer
{
position:absolute;
left:0px;
top:0px;
width:600px;
height:296px;
display:block;
z-index: 1;
}

#adExternal_bigbox
{
position:absolute;
left:296px;
top:20px;
width:300px;
height:250px;
background-color:#000000;
display:block;
z-index: 1000;
}

#adExternal_leaderboard
{
   position:absolute;
   left:8px;
   top:20px;
   width:728px;
   height:90px;
   background-color:#000000;
   display:block;
   z-index: 1000;
}

-->
</style>
<body>

3- Save the HTML page you have created, then upload it on your web server.
For the Listen Live link on your website, you need to use the path to the new HTML page you have created and NOT the url http://player.streamtheworld.com/liveplayer.php

Note: Only the JavaScript Embed method must be used for embedding external banners with a Live Player.

4- Sample files

For testing purposes, we have created sample files: For a live player with a big box, you can go to http://player.staging.streamtheworld.com/STW/adsexternal/gla1.php?callsign=[CALLSIGN_HERE] and directly copy/paste the source code in that page to create your own html page.

For embedding a leaderboard you need to add the following code:
<script src="http://player.streamtheworld.com/_core/adexternal.php?type=leaderboard" type="text/javascript" language="javascript"></script>

NOTE: you can edit or tweak any of the child parameters or CSS settings to change the colors, position, etc of the player.

Should you have any questions, or need any assistance whatsoever, please contact our Support Desk immediately by clicking the link at the top of the screen. They will be more than happy to help you create a page with the proper Embed code.

You can share this article or rate it by clicking the proper link below. If you found this article useful, please tell us so that we can write more like it! Thanks!

Subscribe to Comments

Subscribe to Updates

Email to a Friend

Print Article

Export to PDF

Add to My Favorites

Remove from Favorites

Was this article helpful? let us know by rating it (1=Lowest, 5=Highest)