Archivo JavaScript del kit de desarrollo de software de reproductor web TD
Incluya los siguientes archivos de la biblioteca JavaScript en el cuerpo de su página HTML:
<body>
[....]
<script
src="//sdk.listenlive.co/web/2.9/td-sdk.min.js"></script>
</body>Configure e incorpore el reproductor multimedia
Incluya el código JavaScript y HTML del siguiente ejemplo:
<!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>El objeto tdPlayerConfig contiene la lista de módulos que se van a cargar. En el ejemplo anterior, solo se define el módulo MediaPlayer y se usa el elemento div td_container como contenedor del reproductor.
Tan pronto como se activa la función de devolución de llamada onPlayerReady , la instancia del reproductor multimedia está lista para ser utilizada.
Para adjuntar otros oyentes en el SDK, use la función addEventListener( eventName, callback )
Para obtener más información sobre la integración de JavaScript del kit de desarrollo de software, consulte Referencia de kit de desarrollo de software de JavaScript.
Estructura del objeto de configuración JavaScript
El kit de desarrollo de software de reproductor web Triton Digital 2.9 es configurable con un objeto JSON. La propiedad principal de este objeto JSON es coreModules y contiene la lista de módulos que se van a cargar.
Definición del objeto "coreModules"
Cada módulo (objeto JavaScript) incluido en coreModules corresponde a una función de reproductor. Los módulos actualmente disponibles en el kit de desarrollo de software, junto con sus ID, se describen brevemente a continuación. Se describen en detalle en "Definición y configuración de lista de módulos".
- MediaPlayer: reproducción de stream de audio/video en vivo con puntos de referencia y funciones de anuncios.
- NowPlayingApi: recupera un historial de reproducción de stream. Útil para la historia de la canción.
- SyncBanners: Este módulo es necesariopara mostrar Ad Companions.
- oit es necesario para mostrar Complementos de anuncios on demand (Preroll).
- escucha los cortes publicitarios in-stream para mostrar Complementos de anuncios sincronizados* (ver Marcadores de capacidades de banner para obtener información sobre capacidades de banner)
Complementos de anuncios sincronizados: tanto banners sincronizados durante el podcast VAST In-Stream como VAST / Legacy (Ando). (Nota: El plugin "vastAd" de MediaPlayer es necesario para VAST In-Stream).
Los Complementos de anuncios sincronizados se muestran cuando se recibe un punto de referencia de corte publicitario.
El módulo SyncBanners maneja el proceso, por lo que todo lo que tiene que hacer es configurar el módulo especificando la lista de elementos de anuncio en su página ( ID div y dimensiones).
Cada vez que se muestra un complemento de anuncio, se activa un evento "ad-break-synced-element". 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.
Definición y configuración de lista de módulos
ID de módulo | Propiedades y definición | ||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
MediaPlayer | playerId (cadena). Requerido: Sí El Elemento DOM se usa para integrar el reproductor multimedia. Para poder mostrar anuncios de vídeo (preroll o video mid-rolls), debe definir la hoja de estilos CSS en el elemento div playerId de la página. El SDK en sí no cambia ninguna hoja de estilo CSS en el elemento div playerId , es su responsabilidad definir la hoja de estilo CSS correspondiente a su propia integración. Ejemplo: cuando se está reproduciendo un preroll, muestre el elemento playerId en la página, luego, cuando se esté reproduciendo el audio en vivo, puede ocultar el elemento div playerId . Registre devoluciones de llamada en los eventos del SDK (ad-playback-start, ad-playback-complete, stream-start) para definir los estilos CSS en el momento adecuado. Ejemplo: playerId: 'td_container' | ||||||||||||||||||||
platformId (cadena). Requerido: No Entorno de plataforma - Por defecto: 'prod01' Ejemplo: platformId:'preprod01' | |||||||||||||||||||||
sbm (objeto). Requerido: No. Objeto de configuración de metadatos de banda lateral. Si su estación no admite la tecnología de metadatos de banda lateral, configúrelo en falso. Luego, los datos de stream se recibirán a través de la tecnología aSyncCuePoint (sondeo). Si no quiere recibir ningún dato, configure aSyncCuePointFallback en falso. sbm:{ active:true/false, aSyncCuePointFallback:true/false } | |||||||||||||||||||||
hls (booleano). Requerido: No. Valor predeterminado: true. Activar/desactivar compatibilidad de tecnología HLS (iOS únicamente). hls: true/false | |||||||||||||||||||||
forceHls (booleano). Requerido: No. Valor predeterminado: false. Compatibilidad con tecnología Force HLS en todas las plataformas. forceHls: true/false | |||||||||||||||||||||
forceHlsts (booleano). Requerido: No. Valor predeterminado: false. Compatibilidad con tecnología Force HLSTS en todas las plataformas. forceHlsts: true/false | |||||||||||||||||||||
audioAdaptive (booleano). Requerido: No. Valor predeterminado: false. Activar / desactivar asistencia de audio adaptable. Audio adaptable: verdadero/falso | |||||||||||||||||||||
idSync (objeto). Requerido: Sí. Objeto de configuración de sincronización de cookies. Hay cinco opciones disponibles para la sincronización de cookies: station name, station Id, mount, gdpr y gdpr_consent. idSync:{station:'ABCDFM'} idSync:{stationId:12345} idSync:{mount:'ABCFMAAC'} idSync: {gdpr: 0 | 1} Establece si se aplica GDPR o no. 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. El resultado de los scripts que se cargan sería la identificación de la estación de arriba, seguido de dos parámetros de GDPR: <script type="text/javascript" src="http://playerservices.live.streamtheworld.com/api/idsync.js?stationId=<stationId>[&gdpr=<gdpr>&gdpr_consent=<gdpr_consent>]</script> | |||||||||||||||||||||
plugins (Array). Requerido: No. El conjunto de plugins es específico del módulo MediaPlayer. Cada plugin contiene ID (secuencia) y otras configuraciones opcionales. Ejemplo: plugins: [ {id:"vastAd"}, {id:"mediaAd"} ] | |||||||||||||||||||||
Definición del módulo en el objeto coreModules : { | |||||||||||||||||||||
playerServicesRegion (cadena). Requerido: No. 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. La región de aprovisionamiento predeterminada es América del Norte; para usar una de las otras regiones, especifíquela mediante la propiedad playerServicesRegion , como se muestra en el ejemplo siguiente. Opciones:
Ejemplo: playerServicesRegion: "eu" | |||||||||||||||||||||
geoTargeting (Objeto). Requerido: No. Se usa para habilitar o deshabilitar el direccionamiento con geolocalización. Opciones:
Si no se utiliza la propiedad geoTargeting , el geodireccionamiento está habilitado de forma predeterminada solo para escritorio. Para habilitar el direccionamiento geográfico para dispositivos móviles, la propiedad debe estar presente junto con la opción true para dispositivos móviles, como se muestra en el ejemplo siguiente. geoTargeting: { | |||||||||||||||||||||
streamWhileMuted (objeto). Requerido: No. Se usa para habilitar o deshabilitar la reproducción continua de streaming cuando el usuario silencia el audio. El valor predeterminado es false. Opciones:
| |||||||||||||||||||||
NowPlayingApi | Definición del módulo en el objeto coreModules : { id: 'NowPlayingApi' } | ||||||||||||||||||||
TargetSpot | Definición del módulo en el objeto coreModules : { id: 'TargetSpot' } | ||||||||||||||||||||
SyncBanners | elementos (Array). Requerido: Sí. keepElementsVisible (booleano). Requerido: No. vastCompanionPriority (Array). Requerido: No El objeto elements define la lista de elementos HTML externos en la página que se usan como marcadores de posición para mostrar los Complementos de anuncio. Cada elemento debe definir una ID (es decir, la ID div en la página); un ancho y una altura. La propiedad keepElementsVisible es booleana (true o false): establézcala en true para mantener los banners de anuncios sincronizados en la página después de que finalice la duración del corte del anuncio. Configúrelo en falso para ocultar los banners sincronizados del anuncio al término de la duración del corte del anuncio. La propiedad vastCompanionPriority definió el orden de prioridad del tipo de acompañantes admitido ('static', 'iframe', 'html') por los banners de sincronización de anuncios (campaña VAST). Definición del módulo en el objeto 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'] } Para VAST In-Stream, se requiere el plugin de MediaPlayer "vastAd".
|
Módulo MediaPlayer: definición de lista de plugins
A continuación puede ver una lista de los plugins admitidos actualmente por el módulo MediaPlayer:
| ID | Definición |
|---|---|
vastAd | Este plugin es necesario si desea reproducir anuncios VAST/VPAID/VMAP/DAAST en su reproductor para anuncios preroll y/o VAST/DAAST In-Stream. Admite VAST 1.0 / VAST 2.0 / VMAP / DAAST 1.0. El plugin admite contenedores VAST/DAAST, anuncios en línea de audio/video y anuncios complementarios. Este plugin debe utilizarse para acceder a las campañas publicitarias de VAST/DAAST (TritonRunSpot V4.0+ y Tap). Capacidades de este plugin: Ad playback start / Ad playback complete / Ad countdown / Play ad / Skip Ad. |
mediaAd | El plugin Media Ad permite la reproducción de cualquier anuncio multimedia (audio/video). La configuración de este plugin es sencilla; simplemente proporcione el URL del anuncio multimedia y un enlace externo opcional. Capacidades de este plugin: Ad playback start / Ad playback complete / Ad countdown / Play ad / Skip Ad. |