Vous pouvez intégrer un lecteur Web Triton Digital dans une page Web. Vous devez le configurer avec un objet JSON qui spécifie les modules à charger. Chaque module fournit des fonctionnalités pour le lecteur.
Inclure le kit de développement logiciel (SDK) du lecteur Web
Intégrez les fichiers de la bibliothèque JavaScript suivants dans le corps de votre page HTML. Pour obtenir plus d’informations, consultez la section Points de terminaison du SDK.
<body>
...
<script src="//sdk.listenlive.co/web/2.9/td-sdk.min.js"></script>
</body>Configurez et intégrez le lecteur média
Cet exemple permet de configurer et d’intégrer un lecteur dans une page Web :
Le lecteur Web est configuré avec un objet JSON, tdPlayerConfig. La propriété principale de cet objet JSON est coreModules et contient la liste des modules à charger.
Dans cet exemple, seul le module MediaPlayer est défini, ce qui spécifie l’élément div td_container comme conteneur du lecteur. Pour obtenir plus d’informations, consultez la section Objet de configuration JSON.
L’instance du lecteur multimédia est prête à être utilisée lorsque la fonction onPlayerReady est appelée.
Pour attacher d’autres auditeurs sur le SDK, utilisez la fonction 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
Lecture instantanée de l’audio et de la vidéo avec des marqueurs et des fonctions publicitaires.
Exemple :
{
id: 'MediaPlayer',
playerId: 'td_container'
}playerId
Chaîne. Obligatoire.
Élément DOM utilisé pour intégrer le lecteur média.
Pour pouvoir afficher des annonces vidéo (avant ou pendant la diffusion vidéo), vous devez définir la feuille de style CSS sur l’élément div playerId de la page. Le SDK lui-même ne change aucune feuille de style CSS sur l’élément div playerId , il est de votre responsabilité de définir la feuille de style CSS correspondant à votre propre intégration. Exemple : lors de la lecture d’un marqueur d'avant diffusion, affichez l’élément playerId dans la page, puis lorsque l’audio en direct est en cours de lecture, vous pouvez masquer l’élément playerId div.
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.
Environnement de la plate-forme.
Valeur par défaut : 'prod01'
sbm
Objet.
Objet de configuration de métadonnées de Sideband.
Si votre station ne prend pas en charge la technologie de métadonnées Sideband, définissez-la sur false. Ensuite, les données de flux seront reçues via la technologie aSyncCuePoint (interrogation). Si vous ne souhaitez pas du tout recevoir de données, définissez aSyncCuePointFallback sur false.
sbm : { active:true|false, aSyncCuePointFallback:true|false }
hls
Boolean.
Valeur par défaut : true.
Activer/Désactiver l'assistance technique HLS (iOS uniquement)
hls : true/false
forceHls
Boolean. Valeur par défaut : false.
L'assistance technologie Force HLS sur toutes les plateformes.
forceHls : vrai/faux
audioAdaptive
Boolean.
Activer / Désactiver le support audio adaptatif.
Valeur par défaut : false.
audioAdaptive: true/false
idSync
Objet. Obligatoire.
Objet de configuration de la synchronisation des cookies.
Cinq options sont disponibles pour prendre en charge la synchronisation des cookies : station, stationId, mount, gdpr et gdpr_consent. Chaque option ajoute automatiquement un script Javascript à l’élément <corps> de la page.
Exemple d’option | Script ajouté |
|---|---|
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
Gamme.
Le tableau de plug-ins est spécifique au module MediaPlayer. Chaque plug-in contient un identifiant (String) et d’autres configurations facultatives. Reportez-vous à la section Plug-ins MediaPlayer.
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.
La région d’approvisionnement par défaut est l’Amérique du Nord ; pour utiliser l’une des autres régions, spécifiez-la à l’aide de la propriété playerServicesRegion , comme indiqué dans l’exemple ci-dessous.
Options :
Européen = UE
Asie = ap
Exemple : playerServicesRegion : « eu »
geoTargeting
Objet.
Utilisé pour activer ou désactiver la géolocalisation.
Options :
Désactivé : faux
Activé : vrai
Si la propriété geoTargeting n’est pas utilisée, le ciblage géographique est activé par défaut pour les ordinateurs de bureau uniquement. Pour activer le ciblage géographique pour mobile, la propriété doit être présente avec l’option true pour mobile, comme indiqué dans l’exemple ci-dessous.
geoTargeting: {
desktop: {
isActive: true
},
iOS: {
isActive: true
},
android: {
isActive: true
}
}
streamWhileMuted
Objet.
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
Nombre.
Valeur minimale : 1. Valeur par défaut : 15.
Contrôle la taille initiale de la mémoire tampon en rafale, en secondes, pour les flux HTTP progressifs. Spécifie le nombre de secondes d’audio que le serveur doit envoyer lors de la rafale initiale. Ce paramètre est ajouté à l’URL du flux en tant que burst-time et n’est efficace que pour les flux progressifs (pas HLS). Des valeurs plus élevées offrent une meilleure mise en mémoire tampon pour les connexions instables, mais peuvent augmenter le temps de chargement initial. Il n’y a pas de limite supérieure, mais une définition trop élevée entraînera des problèmes de performances. Pour obtenir plus d’informations, reportez-vous à la section Mémoire tampon de lecture instantanée.
hlsBufferLength
Nombre.
Valeur minimale : 1. Valeur par défaut : 30.
Contrôle la longueur de la mémoire tampon HLS.js en secondes. Spécifie la quantité de données audio que HLS.js mettra en mémoire tampon avant la tête de lecture pour les flux HLS. Des valeurs plus élevées offrent une meilleure protection contre les interruptions du réseau, mais consomment plus de mémoire. Ce paramètre ne s’applique qu’aux flux HLS et n’a aucun effet sur les flux progressifs. Il n’y a pas de limite supérieure, mais une définition trop élevée entraînera des problèmes de performances.
Module : NowPlayingApi
Récupère l’historique de lecture d’un flux. Utile pour l’historique des morceaux.
Module : TargetSpot
Permet les publicités avant diffusion, y compris la synchronisation des bannières publicitaires avec les publicités audio et la synchronisation du volume audio entre le flux en direct et la publicité.
Module : SyncBanners
Requis pour afficher les compagnons publicitaires.
Ce module est nécessaire pour afficher des compagnons publicitaires à la demande (avant diffusion). Il écoute les coupures publicitaires en continu pour afficher les compagnons publicitaires synchronisés.
Les compagnons d'annonce synchronisés sont affichés lors de la réception d'un point de repère de coupure publicitaire. Le module SyncBanners gère le processus. Il vous suffit donc de le configurer en spécifiant la liste des éléments d’annonce de votre page (div IDs et 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.
Compagnons publicitaires synchronisés : bannières VAST en continu en cours de diffusion et bannières synchronisées VAST/Legacy (Ando).
Le plug-in vastAd de MediaPlayer est requis pour VAST en continu.
Indicateur de capacité de bannière | 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
Gamme. Obligatoire.
Liste des éléments HTML externes de la page utilisés comme espaces réservés pour afficher les compagnons publicitaires.
Chaque élément doit définir un identifiant de l’élément conteneur dans la page, une largeur et une hauteur.
keepElementsVisible
Boolean.
Définissez cette option sur true pour conserver les bannières publicitaires synchronisées dans la page après la fin de la durée de la coupure publicitaire. Définissez-la sur false pour masquer les bannières synchronisées à la fin de la durée de la coupure publicitaire.
vastCompanionPriority
Gamme.
L’ordre de priorité du type de compagnon pris en charge par les bannières de synchronisation publicitaire (campagne VAST) : 'static', 'iframe' et 'html'.
Par défaut : ['static','iframe','html'].
Pour VAST In-Stream, le plug-in MediaPlayer « vastAd » est requis.
Plug-ins MediaPlayer
Vous trouverez ci-dessous la liste des plug-ins actuellement pris en charge par le module MediaPlayer.
Plug-in : vastAd
Le plug-in vastAd est nécessaire si vous souhaitez lire des annonces VAST/VPAID/VMAP/DAAST dans votre lecteur d'avant diffusion ou VAST/DAAST lors de la lecture en continu. 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.
Plug-in : mediaAd
Le plug-in mediaAd permet la lecture instantanée de n’importe quelle annonce média, audio ou vidéo.
La configuration de ce plugin est simple. ust fournir l’URL mediaAd et un lien externe facultatif.
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.