You can embed a Triton Digital Web Player in a web page. You configure it with a JSON object that specifies the modules to load. Each module provides features for the player.
Include the Web Player SDK
Include the following JavaScript library files in the body of your HTML page. For details, see SDK Endpoints.
<body>
...
<script src="//sdk.listenlive.co/web/2,90/td-sdk.min.js"></script>
</body>Configure e incorpore el reproductor multimedia
This example configures and embeds a player in a web page:
The web player is configured with a JSON object, tdPlayerConfig. The main property of this JSON object is coreModules and contains the list of modules to load.
In this example, only the MediaPlayer module is defined, which specifies the div element td_container as the player’s container. For details, see JSON Configuration Object.
The media player instance is ready to be used when the function onPlayerReady is called.
To attach other listeners on the SDK, use the function addEventListener( eventName, callback ).
<!DOCTYPE html>
<html>
<head>
<title>TD Web Player SDK 2,90 - Simple implementation demo</title>
</head>
<body>
<!-- Player container -->
<div id="td_container"></div>
<!-- Now Playing information -->
<div id="onair"></div>
<script>
var player;
function initPlayerSDK() {
console.log('TD Player SDK is ready');
//Player configuration: list of modules
var tdPlayerConfig = {
coreModules: [{
id: 'MediaPlayer',
playerId: 'td_container'
}],
playerReady: onPlayerReady,
configurationError: onConfigurationError,
moduleError: onModuleError,
adBlockerDetected: onAdBlockerDetected
};
//Player instance
player = new TDSdk(tdPlayerConfig);
}
/* Callback function to notify that the SDK is ready to be used. */
function onPlayerReady() {
//Listen for 'track-cue-point' event
player.addEventListener('track-cue-point', onTrackCuePoint);
//Play the stream: station is TRITONRADIOMUSIC
player.play({
station: 'TRITONRADIOMUSIC'
});
}
/* Callback function to notify that the player configuration has an error. */
function onConfigurationError(e) {
console.log(object);
console.log(object.data.errors);
//Error code : object.data.errors[0].code
//Error message : object.data.errors[0].message
}
/* Callback function to notify that a module has not been loaded properly */
function onModuleError(object) {
console.log(object);
console.log(object.data.errors);
//Error code : object.data.errors[0].code
//Error message : object.data.errors[0].message
}
/* Callback function to notify when a new Track CuePoint comes in. */
function onTrackCuePoint(e) {
console.log('onTrackCuePoint');
console.log(e.data.cuePoint);
//Display now playing information in the "onair" div element.
document.getElementById('onair')
.innerHTML = 'Artist: ' + e.data.cuePoint.artistName +
'<BR>Title: ' + e.data.cuePoint.cueTitle;
}
/* Callback function to notify that an Ad-Blocker was detected. */
function onAdBlockerDetected() {
console.log('AdBlockerDetected');
}
</script>
<script src="//sdk.listenlive.co/web/2,90/td-sdk.min.js"></script>
<script>
initPlayerSDK();
</script>
</body>
</html>Module: MediaPlayer
Live playback of audio and video with cue points and ads features.
Ejemplo:
{
id: 'MediaPlayer',
playerId: 'td_container'
}playerId
String. Required.
El Elemento DOM se usa para integrar el reproductor multimedia.
To be able to display video ads (preroll or video mid-rolls), you must define the CSS stylesheet on the playerId div element in the page. The SDK itself does not change any CSS stylesheet on the playerId div element, it is your responsibility to define the CSS stylesheet corresponding to your own integration. Example: when a preroll is playing, show the playerId element in the page, then when the live audio is playing, you can hide the playerId div element.
Register callbacks on the SDK events (ad-playback-start, ad-playback-complete, stream-start) to define the CSS styles at the right time.
playerId: 'td_container'
platformId
String.
Platform environment.
Default: 'prod01'
sbm
Object.
Sideband Metadata configuration object.
If your station does not support Sideband metadata technology, set it to false. Then, stream data will be received via aSyncCuePoint technology (polling). If you don't want to receive data at all, set aSyncCuePointFallback to false.
sbm: { active:true|false, aSyncCuePointFallback:true|false }
hls
Boolean.
Default value: true.
Activar/desactivar compatibilidad de tecnología HLS (iOS únicamente).
hls: true/false
forceHls
Boolean. Default value: false.
Force HLS technology support on all platforms.
forceHls: true/false
audioAdaptive
Boolean.
Activate / Deactivate Adaptive Audio support.
Default value: false.
audioAdaptive: true/false
idSync
Object. Required.
Objeto de configuración de sincronización de cookies.
Five options are available to support Cookie synchronization: station, stationId, mount, gdpr, and gdpr_consent. Each option automatically appends a Javascript script to the page’s <body> element.
Example option | Appended script |
|---|---|
idSync: {station:'ABCDFM'} | <script type="text/javascript" src="http://playerservices.live.streamtheworld.com/api/idsync.js?station=ABCDFM"/> |
idSync:{stationId:12345} | <script type="text/javascript" src="http://playerservices.live.streamtheworld.com/api/idsync.js?stationId=12345"/> |
idSync:{mount:'ABCFMAAC'} | <script type="text/javascript" src="http://playerservices.live.streamtheworld.com/api/idsync.js?mount=ABCFMAAC"/> |
idSync: {gdpr: 0 | 1} idSync: {gdpr_consent: 'consent string goes here'} | Codifica los propósitos consentidos y la secuencia de consentimiento del proveedor, según lo obtenido a través de la especificación CMP JS API del Marco de Transparencia y Consentimiento de IAB. The result of the scripts that are to be loaded would be the above station identification followed by the two GDPR parameters: <script type="text/javascript" src="http://playerservices.live.streamtheworld.com/api/idsync.js?stationId=<stationId>[&gdpr=<gdpr>&gdpr_consent=<gdpr_consent>]</script> |
plugins
Array.
The plugins array is specific to the MediaPlayer module. Cada plugin contiene ID (secuencia) y otras configuraciones opcionales. See MediaPlayer Plugins.
Example: plugins: [ {id:"vastAd"}, {id:"mediaAd"} ]
playerServicesRegion
String.
Cuando se carga el SDK, obtiene su configuración de emisora de nuestros servicios de aprovisionamiento. Para acelerar el proceso, contamos con servidores de aprovisionamiento en diversas regiones, incluidas América del Norte, Europa y Asia. Para la obtención de mejores resultados, utilice los servidores de aprovisionamiento que se encuentran más cerca de sus estaciones.
The default provisioning region is North America; to use one of the other regions, specify it using the playerServicesRegion property as seen in the example below.
Options:
European = eu
Asia = ap
Example: playerServicesRegion: "eu"
geoTargeting
Object.
Used to enable or disable geo-targeting.
Options:
Disabled: false
Enabled: true
If the geoTargeting property is not used, then geo-targeting is enabled by default for desktop only. To enable geo-targeting for mobile, the property must be present along with the true option for mobile, as shown in the example below.
geoTargeting: {
desktop: {
isActive: true
},
iOS: {
isActive: true
},
android: {
isActive: true
}
}
streamWhileMuted
Object.
Used to enable or disable stream continuing to play when user mutes the audio. Default is false.
Options:
Disabled (stream stops when muted): false
Enabled (stream continues when muted, but user does not hear audio): true
burstTime
Number.
Minimum value: 1. Default value: 15.
Controls the initial burst buffer size, in seconds, for progressive HTTP streams. Specifies the number of seconds of audio the server should send in the initial burst. This parameter is appended to the stream URL as burst-time and is only effective for progressive streams (not HLS). Higher values provide better buffering for unstable connections but may increase initial load time. There is no upper limit, but setting it too high will cause performance issues. For related information, see Playback Buffer.
hlsBufferLength
Number.
Minimum value: 1. Default value: 30.
Controls the HLS.js buffer length in seconds. Specifies how much audio HLS.js will buffer ahead of the playhead for HLS streams. Higher values provide better protection against network interruptions but consume more memory. This setting only applies to HLS streams and has no effect on progressive streams. There is no upper limit, but setting it too high will cause performance issues.
Module: NowPlayingApi
Retrieves a stream playback history. Useful for song history.
Module: TargetSpot
Allows preroll ads, including syncing banner ads with audio ads and volume syncing the audio between the live stream and ad.
Module: SyncBanners
Required to display Ad Companions.
This module is required to display on-demand Ad Companions (Preroll). It listens for in-stream Ad breaks to display synchronized Ad Companions.
The synchronized Ad Companions are displayed when receiving an ad-break cue point. The SyncBanners module handles the process, so all you have to do is configure the module by specifying the list of ad elements in your page (div IDs and dimensions).
Every time an Ad companion is displayed "ad-break-synced-element" event id fired. Al término de un corte publicitario, se activa un evento ad-break-cue-point-complete". Puede escuchar este evento para ocultar divs de complementos de anuncios, si es necesario, en la página de su reproductor.
Synchronized Ad Companions: both VAST In-Stream mid-roll and VAST / Legacy (Ando) synced banners.
The MediaPlayer vastAd plugin is required for VAST In-Stream.
Banner Capability Flag | Capacidad |
|---|---|
Rectángulo mediano de IAB (300x250) | 300x250 |
Rectángulo de IAB (180x150) | 180x150 |
Leaderboard de IAB (728x90) | 728x90 |
Wide Skyscraper de IAB (160x600) | 160x600 |
Media página de IAB (300x600) | 300x600 |
Botón 2 de IAB (120x60) | 120x60 |
Microbarra de IAB (88x31) | 88x31 |
Banner estático de IAB para smartphone (300x50) | 300x50 |
Banner ancho estático de IAB para smartphone (320x50) | 320x50 |
Ejemplo:
{
id: 'SyncBanners',
elements: [{
id: 'td_synced_bigbox',
width: 300,
height: 250
}, {
id: 'td_synced_leaderboard',
width: 728,
height: 90
}],
keepElementsVisible: false,
vastCompanionPriority: ['static', 'iframe', 'html']
}elementos
Array. Required.
The list of external HTML elements in the page that are used as placeholders to display the Ad Companions.
Each element must define an ID of the containing element in the page, a width, and a height.
keepElementsVisible
Boolean.
Set to true to keep synced ad banners in the page after the end of the ad’s break duration. Set it to false to hide ad synced banners at the end of the ad’s break duration.
vastCompanionPriority
Array.
The priority order of companions type supported by the ad sync banners (VAST campaign): 'static', 'iframe', and 'html'.
Default: ['static','iframe','html'].
For VAST In-Stream, the MediaPlayer plugin "vastAd" is required.
MediaPlayer Plugins
A continuación puede ver una lista de los plugins admitidos actualmente por el módulo MediaPlayer:
Plugin: vastAd
The vastAd plugin is required if you want to play VAST/VPAID/VMAP/DAAST Ads in your player for preroll or VAST/DAAST for in-stream. Admite VAST 1,00 / VAST 2,00 / VMAP / DAAST 1.0.
El plugin admite contenedores VAST/DAAST, anuncios en línea de audio/video y anuncios complementarios.
This plugin must be used to access the VAST/DAAST Ad campaigns (TritonRunSpot V4,00+ and Tap).
Capacidades de este plugin: Ad playback start / Ad playback complete / Ad countdown / Play ad / Skip Ad.
Plugin: mediaAd
The mediaAd plugin allows the playback of any media ad, audio or video.
The configuration of this plugin is straightforward. ust provide the mediaAd URL and an optional external link.
Capacidades de este plugin: Ad playback start / Ad playback complete / Ad countdown / Play ad / Skip Ad.