Fichier JavaScript du SDK du lecteur Web
Incluez les fichiers de bibliothèque JavaScript suivants dans le corps de votre page HTML :
<body>
[....]
<script
src="//sdk.listenlive.co/web/2.9/td-sdk.min.js"></script>
</body>Configurez et intégrez le lecteur média
Incluez le code JavaScript et HTML de l'exemple suivant :
<!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 SDK is ready to be used, this is where you can instantiate a new TDSdk instance.
//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 called 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 called 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 called 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 called to notify that 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 called 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>L’objet tdPlayerConfig contient la liste des modules à charger. Dans l’exemple précédent, seul le module MediaPlayer est défini et l’élément div td_container est utilisé comme conteneur du lecteur.
Dès que la fonction de rappel onPlayerReady est déclenchée, l’instance du lecteur multimédia est prête à être utilisée.
Pour attacher d’autres auditeurs sur le SDK, utilisez la fonction addEventListener (eventName, callback )
Pour en savoir plus sur l'intégration JavaScript du SDK, consultez Référence sur SDK JavaScript.
Structure d'objet de configuration JavaScript
Le SDK 2.9 du lecteur Web de Triton Digital est configurable avec un objet JSON. La propriété principale de cet objet JSON est coreModules et contient la liste des modules à charger.
Définition de l'objet « coreModules »
Chaque module (objet JavaScript) inclus dans coreModules correspond à une fonctionnalité de lecteur. Les modules actuellement disponibles dans le lecteur SDK, ainsi que leurs identifiants, sont décrits brièvement ci-dessous. Ils sont décrits en détail dans la rubrique « Définition et configuration de la liste de modules ».
- MediaPlayer : lecture de flux audio/vidéo en direct avec des marqueurs et des fonctions publicitaires.
- NowPlayingApi : récupère l’historique de lecture d’un flux. Utile pour l’historique des morceaux.
- SyncBanners : ce module est nécessairepour afficher les compagnons publicitaires.
- oit est nécessaire pour afficher des compagnons publicitaires à la demande (avant la diffusion).
- Les coupures publicitaires dans le flux sont écoutées afin d'afficher les compagnons d'annonce synchronisés* (voir avertissements de capacité de bannière pour les capacités de bannière).
Compagnons publicitaires synchronisés : bannières VAST In-Stream en cours de diffusion et bannières synchronisées VAST/Legacy (Ando). (Remarque : le plug-in MediaPlayer « vastAd » est requis pour VAST In-Stream).
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.
Définition et configuration de la liste de modules
Identifiant de module | Propriétés et définition | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
MediaPlayer | playerId (chaîne de caractères). Obligatoire : Oui É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 preroll, affichez l’élément playerId dans la page, puis lorsque l’audio live 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. Exemple : playerId : 'td_container' | ||||||||||||||||||||
platformId (chaîne de caractères). Obligatoire : Non Environnement de la plateforme - Par défaut : 'prod01' Exemple : platformId :'preprod01' | |||||||||||||||||||||
sbm (Objet). Obligatoire : Non. 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 (booléen). Obligatoire : Non. Valeur par défaut : true. Activer/Désactiver l'assistance technique HLS (iOS uniquement) hls : true/false | |||||||||||||||||||||
forceHls (booléen). Obligatoire : Non. Valeur par défaut : false. L'assistance technologie Force HLS sur toutes les plateformes. forceHls : vrai/faux | |||||||||||||||||||||
forceHlsts (booléen). Obligatoire : Non. Valeur par défaut : false. L'assistance technologie Force HLS sur toutes les plateformes. forceHlsts : vrai/faux | |||||||||||||||||||||
audioAdaptive (booléen). Obligatoire : Non. Valeur par défaut : false. Activer / Désactiver le support audio adaptatif. audioAdaptive: true/false | |||||||||||||||||||||
idSync (objet). Obligatoire : Oui. Objet de configuration de la synchronisation des cookies. Cinq options sont disponibles pour prendre en charge la synchronisation des cookies : nom de la station, identifiant de la station, montage, gdpr et gdpr_consent. idSync :{station:'ABCDFM'} idSync :{stationId:12345} idSync :{mount:'ABCFMAAC'} idSync: {gdpr: 0 | 1} Indique si le RGPD s'applique ou non. 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> | |||||||||||||||||||||
plugins (Plateau). Obligatoire : Non. Le tableau de plug-ins est spécifique au module MediaPlayer. Chaque plug-in contient un identifiant (String) et d’autres configurations facultatives. Exemple : plugins : [ {id :"vastAd"}, {id :"mediaAd"} ] Voir « Module MediaPlayer : définition de la liste des plug-ins . » | |||||||||||||||||||||
Définition du module dans l’objet coreModules : { | |||||||||||||||||||||
playerServicesRegion (chaîne). Obligatoire : Non. 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 :
Exemple : playerServicesRegion : « eu » | |||||||||||||||||||||
geoTargeting (Objet). Obligatoire : Non. Utilisé pour activer ou désactiver la géolocalisation. Options :
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: { | |||||||||||||||||||||
streamWhileMuted (objet). Obligatoire : Non. Utilisé pour activer ou désactiver la lecture du flux lorsque l'utilisateur coupe le son. La valeur par défaut est false. Options :
| |||||||||||||||||||||
NowPlayingApi | Définition du module dans l’objet coreModules : { id: 'NowPlayingApi' } | ||||||||||||||||||||
TargetSpot | Définition du module dans l’objet coreModules : { id: 'TargetSpot' } | ||||||||||||||||||||
SyncBanners | elements (Tableau). Obligatoire : Oui. keepElementsVisible (booléen). Obligatoire : Non. vastCompanionPriority (tableau). Obligatoire : Non L'objet éléments définit la 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 (p. ex., l'identifiant div de la page) ; une largeur et une hauteur. La propriété keepElementsVisible est booléenne (vrai ou faux/true ou false) : définissez-la 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. La propriété vastCompanionPriority définit l’ordre de priorité des types de compagnons pris en charge ('statique', 'iframe', 'html') par les bannières de synchronisation publicitaire (campagne VAST). Définition du module dans l’objet coreModules : { id: 'SyncBanners', keepElementsVisible:false, elements:[{id:'td_synced_bigbox', width:300, height:250}, {id:'td_synced_leaderboard', width:728, height:90}], vastCompanionPriority:['static','iframe','html'] } Pour VAST In-Stream, le plug-in MediaPlayer « vastAd » est requis.
|
Module MediaPlayer : Définition de la liste des plug-ins
Vous trouverez ci-dessous la liste des plug-ins actuellement pris en charge par le module MediaPlayer.
| Identifiant | Définition |
|---|---|
vastAd | Ce plug-in est obligatoire si vous souhaitez lire des annonces VAST/VPAID/VMAP/DAAST dans votre lecteur avant la diffusion et/ou VAST/DAAST 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. |
mediaAd | Le plug-in Media Ad permet la lecture instantanée de toute annonce média (audio/vidéo). La configuration de ce plug-in est simple ; contentez-vous de fournir l'URL de l'annonce multimédia 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. |