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.9/td-sdk.min.js"></script>
</body>Configurez et intégrez le lecteur média
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.9 - 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.9/td-sdk.min.js"></script>
<script>
initPlayerSDK();
</script>
</body>
</html>Module: MediaPlayer
Live playback of audio and video with cue points and ads features.
Exemple :
{
id: 'MediaPlayer',
playerId: 'td_container'
}playerId
String. Required.
Élément DOM utilisé pour intégrer le lecteur média.
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.
Enregistrez les rappels sur les événements SDK (ad-playback-start, ad-playback-complete, stream-start) pour définir les styles CSS au bon moment.
playerId: 'td_container'
platformId
Chaîne.
Platform environment.
Default: 'prod01'
sbm
Object.
Objet de configuration de métadonnées de Sideband.
If your station does not support Sideband metadata technology, set it to false. Ensuite, les données de flux seront reçues via la technologie aSyncCuePoint (interrogation). 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.
Activer/Désactiver l'assistance technique HLS (iOS uniquement)
hls : true/false
forceHls
Boolean. Default value: false.
L'assistance technologie Force HLS sur toutes les plateformes.
forceHls : vrai/faux
audioAdaptive
Boolean.
Activer / Désactiver le support audio adaptatif.
Default value: false.
audioAdaptive: true/false
idSync
Object. Required.
Objet de configuration de la synchronisation des 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'} | Code les fins auxquelles le consentement a été donné et la chaîne de consentement du fournisseur, telle qu'elle a été obtenue auprès du CMP JS API du Transparency and Consent Framework de l'IAB. Le résultat des scripts à charger serait l'identification de la station ci-dessus suivie des deux paramètres RGPD : <script type="text/javascript" src="http://playerservices.live.streamtheworld.com/api/idsync.js?stationId=<stationId>[&gdpr=<gdpr>&gdpr_consent=<gdpr_consent>]</script> |
plug-ins
Array.
Le tableau de plug-ins est spécifique au module MediaPlayer. Chaque plug-in contient un identifiant (String) et d’autres configurations facultatives. See MediaPlayer Plugins.
Exemple : plugins : [ {id :"vastAd"}, {id :"mediaAd"} ]
playerServicesRegion
Chaîne.
Lorsque le SDK est chargé, il reçoit la configuration de sa station de nos serveurs d'approvisionnement. Pour accélérer le processus, nous disposons des serveurs d'approvisionnement dans plusieurs régions, notamment en Amérique du Nord, en Europe et en Asie. Pour de meilleurs résultats, utilisez les serveurs d'approvisionnement les plus proches de vos stations.
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 :
Européen = UE
Asie = ap
Exemple : playerServicesRegion : « eu »
geoTargeting
Object.
Utilisé pour activer ou désactiver la géolocalisation.
Options :
Désactivé : faux
Activé : vrai
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.
Utilisé pour activer ou désactiver la lecture du flux lorsque l'utilisateur coupe le son. La valeur par défaut est false.
Options :
Désactivé (le flux s’arrête lorsque le son est coupé) : faux
Activé (le flux continue quand le son est coupé, mais l’utilisateur n’entend pas l’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.
Les compagnons d'annonce synchronisés sont affichés lors de la réception d'un point de repère de coupure publicitaire. 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).
L'identifiant d'événement « ad-break-synced-element » s'affiche chaque fois qu'un compagnon publicitaire est déclenché. À la fin d'une coupure publicitaire, un événement « ad-break-cue-point-complete » est déclenché. Vous pouvez écouter cet événement afin de masquer, le cas échéant, les compagnons publicitaires dans votre page de lecteur.
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 | Capacité |
|---|---|
Rectangle moyen IAB (300x250) | 300x250 |
Rectangle IAB (180x150) | 180x150 |
Tableau de classement (728x90) | 728x90 |
Gratte-ciel large de l'IAB (160x600) | 160x600 |
Demi-page IAB (300x600) | 300x600 |
Bouton IAB 2(120x60) | 120x60 |
Micro-barre IAB (88x31) | 88x31 |
Bannière statique smartphone IAB (300x50) | 300x50 |
Large bannière statique smartphone IAB (320x50) | 320x50 |
Exemple :
{
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']
}éléments
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'].
Pour VAST In-Stream, le plug-in MediaPlayer « vastAd » est requis.
MediaPlayer Plugins
Vous trouverez ci-dessous la liste des plug-ins actuellement pris en charge par le module 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. Il prend en charge VAST 1.0/VAST 2.0/VMAP/DAAST 1.0.
Le plug-in prend en charge les wrappers VAST/DAAST, les annonces en ligne audio/vidéo et les annonces compagnons.
Ce plug-in doit être utilisé pour accéder aux campagnes publicitaires VAST/DAAST (TritonRunSpot V4.0+ et Tap).
Fonctionnalités de ce plug-in : Début de la lecture instantanée de l'annonce/Lecture instantanée de la publicité terminée/Compte à rebours de l'annonce/Lecture de l'annonce/Ignorer l'annonce.
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.
Fonctionnalités de ce plug-in : Début de la lecture instantanée de l'annonce/Lecture instantanée de la publicité terminée/Compte à rebours de l'annonce/Lecture de l'annonce/Ignorer l'annonce.