Los SDK de IMA facilitan la integración de anuncios multimedia en tus sitios web y apps. Los SDKs de IMA pueden solicitar anuncios de cualquier servidor de anuncios compatible con VAST y administrar la reproducción de anuncios en tus apps. Con los SDK de IMA para DAI, las apps realizan una solicitud de transmisión para el video de anuncio y contenido, ya sea VOD o contenido en vivo. Luego, el SDK devuelve una transmisión de video combinada, por lo que no tienes que administrar el cambio entre el anuncio y el video de contenido en tu app.
Selecciona la solución de DAI que prefieras:
- Configura con la DAI de servicio completo: Google Ad Manager selecciona y une los anuncios directamente en tu transmisión de contenido.
- Configura con la DAI de publicación de grupos de anuncios: Google Ad Manager proporciona grupos de anuncios que están disponibles para unirse o cargarse en un reproductor de video.
Reproducir transmisiones en vivo registradas con la API de Video Stitcher de Google Cloud
En esta guía, se muestra cómo usar el SDK de IMA para DAI para HTML5 con el objetivo de solicitar y reproducir una transmisión en vivo de un evento registrado con la API de Google Cloud Video Stitcher y cómo insertar una pausa publicitaria durante la reproducción.
Esta guía amplía el ejemplo básico de la guía de introducción para IMA para DAI.
Para obtener información sobre la integración con otras plataformas o el uso de los SDKs de IMA del cliente, consulta SDKs de anuncios multimedia interactivos.
Para ver o seguir una integración de muestra completada, descarga el ejemplo de Cloud Video Stitcher para HLS o DASH.
Configura un proyecto de Google Cloud
Configura un proyecto de Google Cloud y las cuentas de servicio para acceder al proyecto.
Crea una configuración para un evento de transmisión en vivo con tu propia transmisión en vivo de contenido o una transmisión en vivo de prueba. En esta guía, se espera una transmisión de HLS.
Ingresa las siguientes variables para usarlas en el SDK de IMA:- Ubicación
- La región de Google Cloud
en la que se creó tu configuración en vivo:
LOCATION - Número del proyecto
- El número de proyecto de Google Cloud que usa la API de Video Stitcher:
PROJECT_NUMBER - Token de OAuth
Un token de OAuth de corta duración de una cuenta de servicio con el rol de usuario de Video Stitcher:
OAUTH_TOKEN
Obtén más información para crear credenciales de corta duración para cuentas de servicio. El token de OAuth se puede reutilizar en varias solicitudes, siempre que no haya vencido.
- Código de red
Es el código de red de Ad Manager para solicitar anuncios:
NETWORK_CODE
- ID de configuración en vivo
- Es el ID de configuración de transmisión en vivo que especificaste cuando creaste el evento de transmisión en vivo:
LIVE_CONFIG_ID - Clave de recurso personalizado
- Es la clave de recurso personalizado de Ad Manager que se genera durante el proceso de creación de una configuración para un evento de transmisión en vivo con la API de Video Stitcher:
CUSTOM_ASSET_KEY
Configura un entorno de desarrollo
Las apps de ejemplo del SDK de IMA solo muestran solicitudes de transmisiones de HLS. Puedes seguir usando transmisiones de DASH cuando construyas la clase VideoStitcherLiveStreamRequest. Cuando configures tu reproductor compatible con DASH, deberás configurar un objeto de escucha para los eventos de progreso del reproductor de video que pueda proporcionar los metadatos del video a StreamManager.processMetadata().
Esta función toma tres parámetros:
type: Es una cadena que se debe establecer en'ID3'para las transmisiones de HLS y'urn:google:dai:2018'para las transmisiones de DASH.data: En el caso de los mensajes de eventos de DASH, esta es la cadena de datos del mensaje.timestamp: Es un número que indica la hora de inicio del mensaje de evento para las transmisiones de DASH.
Envía los metadatos tan pronto y con la mayor frecuencia posible según lo que puedan proporcionar los eventos de tu reproductor. Si faltan metadatos o no son correctos, es posible que el SDK de IMA para DAI no active los eventos de anuncios, lo que generará informes incorrectos de estos eventos.
Descarga los ejemplos de IMA para DAI para HTML5 y extrae la muestra simple de HLS.js en una carpeta nueva. Este ejemplo es una app web que puedes alojar de forma local con fines de prueba.
Para alojar el ejemplo de forma local, navega a la carpeta nueva y ejecuta el siguiente comando de Python para iniciar un servidor web:
python3 -m http.server 8000http.server solo está disponible en Python 3.x. Puedes usar cualquier otro servidor web,
como el servidor HTTP de Apache o Node JS.
Abre un navegador web y navega a localhost:8000 para ver un reproductor de video.
Tu navegador debe admitir la biblioteca de HLS.js.
Si todo funciona correctamente, cuando hagas clic en el botón de reproducción del reproductor de video, comenzará el cortometraje "Tears of Steel" después de un anuncio breve. Este contenido se entrega con una transmisión de video on demand (VOD).
Solicita una transmisión en vivo
Para reemplazar la transmisión de VOD de muestra por tu transmisión en vivo, usa la clase VideoStitcherLiveStreamRequest, que crea automáticamente una sesión publicitaria con Google Ad Manager. Puedes usar la IU de Google Ad Manager para ubicar las sesiones de DAI generadas con fines de supervisión y depuración.
En la muestra existente, hay funciones para solicitar una transmisión de VOD o una transmisión en vivo. Para que funcione con la API de Video Stitcher de Google Cloud, debes agregar una función nueva que devuelva un objeto VideoStitcherLiveStreamRequest.
Por ejemplo:
// StreamManager which will be used to request ad-enabled streams.
let streamManager;
...
function initPlayer() {
videoElement = document.getElementById('video');
adUiElement = document.getElementById('adUi');
streamManager = new google.ima.dai.api.StreamManager(
videoElement,
adUiElement
);
streamManager.addEventListener(
[
google.ima.dai.api.StreamEvent.Type.LOADED,
google.ima.dai.api.StreamEvent.Type.ERROR,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED
],
onStreamEvent, false);
hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
if (streamManager && data) {
// For each ID3 tag in our metadata, we pass in the type - ID3, the
// tag data (a byte array), and the presentation timestamp (PTS).
data.samples.forEach(function(sample) {
streamManager.processMetadata('ID3', sample.data, sample.pts);
});
}
});
videoElement.addEventListener('pause', () => {
playButton.style.display = 'block';
});
playButton.addEventListener('click', initiatePlayback);
}
function initiatePlayback() {
requestVideoStitcherStream();
playButton.style.display = "none";
playButton.removeEventListener('click', initiatePlayback);
playButton.addEventListener('click', resumePlayback);
}
...
function requestVideoStitcherStream() {
const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
streamRequest.region = 'LOCATION';
streamRequest.projectNumber = 'PROJECT_NUMBER';
streamRequest.oAuthToken = 'OAUTH_TOKEN';
streamRequest.networkCode = 'NETWORK_CODE';
streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';
streamManager.requestStream(streamRequest);
}
Para las pruebas locales, si los archivos de transmisión en vivo se encuentran en un bucket de Cloud Storage, debes habilitar CORS para el origen http://localhost:8000.
Vuelve a cargar la página. Luego, puedes solicitar y reproducir transmisiones en vivo personalizadas.
Agrega opciones de sesión de transmisión (opcional)
Personaliza tu solicitud de transmisión agregando opciones de sesión para anular la configuración predeterminada de la API de Cloud Video Stitcher con VideoStitcherLiveStreamRequest.videoStitcherSessionOptions.
Si proporcionas una opción no reconocida, la API de Video Stitcher de Cloud responderá con un error HTTP 400. Consulta la
guía de solución de problemas
para obtener asistencia.
Por ejemplo, puedes anular las opciones de manifiesto con el siguiente fragmento de código, que solicita dos manifiestos de transmisión con versiones ordenadas de la tasa de bits más baja a la más alta.
...
// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
"manifestOptions": {
"bitrateOrder": "ascending"
}
};
streamManager.requestStream(streamRequest);
Cómo insertar una pausa publicitaria
La API de Video Stitcher de Google Cloud inserta los anuncios recuperados de la etiqueta de anuncio para cada pausa publicitaria. Las pausas publicitarias se indican en el manifiesto con marcadores de anuncios. El codificador de la transmisión en vivo inserta los marcadores de anuncios.
Si usas tu propia transmisión en vivo, debes insertar el marcador de anuncios. Para obtener más información sobre los marcadores de anuncios de HLS y DASH compatibles, consulta la documentación de marcadores de anuncios.
Si creaste una transmisión en vivo con la API de Livestream de Google Cloud, inserta un evento de canal de pausa publicitaria.
El anuncio se reproduce inmediatamente después de que se inserta la pausa publicitaria.
Limpia
Ahora que alojaste correctamente una transmisión en vivo con la API de Video Stitcher de Google Cloud y la solicitaste con el SDK de IMA para DAI para HTML5, es importante que limpies los recursos de entrega.
Sigue la guía para limpiar la transmisión en vivo y quitar los recursos y activos innecesarios.
Por último, en la ventana de terminal en la que iniciaste el servidor web de Python 3, usa
el comando ctrl+C para finalizar el servidor local.