Puede incrustar un reproductor web de Triton Digital en una página web. Se configura con un objeto JSON que especifica los módulos que se van a cargar. Cada módulo proporciona características para el reproductor.
Incluir el kit de desarrollo de software de reproductor web
Incluya los siguientes archivos de biblioteca JavaScript en el cuerpo de su página HTML. Para obtener más información, consulte Extremos del SDK.
<body>
...
<script src="//sdk.listenlive.co/web/2.9/td-sdk.min.js"></script>
</body>Configure e incorpore el reproductor multimedia
En este ejemplo se configura e incrusta un reproductor en una página web:
El reproductor web está configurado con un objeto JSON, tdPlayerConfig. La propiedad principal de este objeto JSON es coreModules y contiene la lista de módulos que se van a cargar.
En este ejemplo, solo se define el módulo MediaPlayer, que especifica el elemento div td_container como contenedor del reproductor. Para obtener más información, consulte Objeto de configuración JSON.
La instancia del reproductor multimedia está lista para usarse cuando se llama a la función onPlayerReady .
Para adjuntar otros oyentes en el SDK, use la función 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>Módulo: MediaPlayer
Reproducción en vivo de audio y video con puntos de referencia y funciones de anuncios.
Ejemplo:
{
id: 'MediaPlayer',
playerId: 'td_container'
}playerId
Cadena. Obligatorio.
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.
playerId: 'td_container'
platformId
Secuencia.
Entorno de plataforma.
Valor predeterminado: 'prod01'
sbm
Objeto.
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 desea recibir ningún dato, establezca aSyncCuePointFallback en false.
sbm: { active:true|false, aSyncCuePointFallback:true|false }
hls
Booleano.
Valor predeterminado: true.
Activar/desactivar compatibilidad de tecnología HLS (iOS únicamente).
hls: true/false
forceHls
Booleano. Valor predeterminado: false.
Compatibilidad con tecnología Force HLS en todas las plataformas.
forceHls: true/false
audioAdaptive
Booleano.
Activar / desactivar asistencia de audio adaptable.
Valor predeterminado: false.
Audio adaptable: verdadero/falso
idSync
Objeto. Obligatorio.
Objeto de configuración de sincronización de cookies.
Hay cinco opciones disponibles para admitir la sincronización de cookies: station, stationId, mount, gdpr y gdpr_consent. Cada opción agrega automáticamente un script Javascript al elemento <cuerpo> de la página.
Opción de ejemplo | Script adjunto |
|---|---|
idSync: {estación:'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. 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
Matriz.
El conjunto de plugins es específico del módulo MediaPlayer. Cada plugin contiene ID (secuencia) y otras configuraciones opcionales. Consulte Plugins de MediaPlayer.
Ejemplo: plugins: [ {id:"vastAd"}, {id:"mediaAd"} ]
playerServicesRegion
Secuencia.
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:
Europeo = UE
Asia = ap
Ejemplo: playerServicesRegion: "eu"
geoTargeting
Objeto.
Se usa para habilitar o deshabilitar el direccionamiento con geolocalización.
Opciones:
Deshabilitado: falso
Habilitado: verdadero
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: {
desktop: {
isActive: true
},
iOS: {
isActive: true
},
android: {
isActive: true
}
}
streamWhileMuted
Objeto.
Se usa para habilitar o deshabilitar la reproducción continua de streaming cuando el usuario silencia el audio. El valor predeterminado es false.
Opciones:
Desactivado (el stream se detiene cuando se silencia): false
Habilitado (la transmisión continúa cuando se silencia, pero el usuario no oye el audio): true
burstTime
Número.
Valor mínimo: 1. Valor predeterminado: 15.
Controla el tamaño inicial del búfer de ráfaga, en segundos, para secuencias HTTP progresivas. Especifica el número de segundos de audio que el servidor debe enviar en la ráfaga inicial. Este parámetro se agrega a la URL del stream como tiempo de ráfaga y solo es efectivo para streams progresivos (no HLS). Los valores más altos proporcionan un mejor almacenamiento en búfer para conexiones inestables, pero pueden aumentar el tiempo de carga inicial. No hay un límite superior, pero configurarlo demasiado alto causará problemas de rendimiento. Para obtener información relacionada, consulte Búfer de reproducción.
hlsBufferLength
Número.
Valor mínimo: 1. Valor predeterminado: 30.
Controla la longitud del búfer HLS.js en segundos. Especifica la cantidad de HLS.js de audio que se almacenará en búfer antes del cabezal de reproducción para streams HLS. Los valores más altos proporcionan una mejor protección contra las interrupciones de la red, pero consumen más memoria. Esta configuración solo se aplica a los streams HLS y no tiene ningún efecto en los streams progresivos. No hay un límite superior, pero configurarlo demasiado alto causará problemas de rendimiento.
Módulo: NowPlayingApi
Recupera un historial de reproducción de stream. Útil para la historia de la canción.
Módulo: TargetSpot
Permite anuncios antes del podcast, incluida la sincronización de anuncios de banner con anuncios de audio y la sincronización de volumen del audio entre la transmisión en vivo y el anuncio.
Módulo: SyncBanners
Obligatorio para mostrar los complementos de anuncios.
Este módulo es necesario para mostrar Ad Companions on demand (Preroll). Escucha las pausas publicitarias in-stream para mostrar los complementos de anuncios sincronizados.
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.
Complementos de anuncios sincronizados: tanto banners sincronizados durante el podcast VAST In-Stream como VAST / Legacy (Ando).
El plugin MediaPlayer vastAd es necesario para VAST In-Stream.
Indicador de capacidad de banner | 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
Matriz. Obligatorio.
La lista de elementos HTML externos de la página que se usan como marcadores de posición para mostrar los Complementos de anuncio.
Cada elemento debe definir un ID del elemento que contiene en la página, un ancho y un alto.
keepElementsVisible
Booleano.
Configúrelo 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 final de la duración del corte del anuncio.
vastCompanionPriority
Matriz.
El orden de prioridad del tipo de complementos admitido por los banners de sincronización de anuncios (campaña VAST): 'static', 'iframe' y 'html'.
Valor predeterminado: ['static','iframe','html'].
Para VAST In-Stream, se requiere el plugin de MediaPlayer "vastAd".
MediaPlayer Plugins
A continuación puede ver una lista de los plugins admitidos actualmente por el módulo MediaPlayer:
Plugin: vastAd
El complemento vastAd es necesario si desea reproducir anuncios VAST/VPAID/VMAP/DAAST en su reproductor para antes del podcast o VAST/DAAST para 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.
Plugin: mediaAd
El plugin mediaAd permite la reproducción de cualquier anuncio multimedia, audio o video.
La configuración de este plugin es sencilla. ust proporciona la URL de mediaAd y un enlace externo opcional.
Capacidades de este plugin: Ad playback start / Ad playback complete / Ad countdown / Play ad / Skip Ad.