Los SDK de IMA facilitan la integración de anuncios multimedia en sus sitios web y aplicaciones. Los SDK de IMA pueden solicitar anuncios de cualquier servidor de anuncios compatible con VAST y administra la reproducción de anuncios en tus apps. Con los SDK de IMA de DAI, las aplicaciones solicitud de transmisión para anuncios y videos de contenido, ya sea VOD o contenido en vivo. Luego, el SDK muestra un una transmisión de video por Internet combinada, de modo que no tenga que administrar el cambio entre el video del anuncio y el de contenido dentro de la app.
Selecciona la solución de DAI que te interesa
Reproduce transmisiones en vivo registradas con la API de Video Stitcher de Google Cloud
Esta guía muestra cómo usar el SDK de IMA de DAI para HTML5 para solicitar y reproducir un transmisión en vivo de un evento registrado en la herramienta de unión de videos de Google Cloud API y cómo insertar una pausa publicitaria durante la reproducción.
En esta guía, se amplía el ejemplo básico de la sección Cómo comenzar guía para la DAI de IMA.
Para obtener información sobre la integración con otras plataformas o el uso de IMA Para obtener más información sobre los SDKs del cliente, consulta SDK de anuncios multimedia interactivos.
Configura un proyecto de Google Cloud
Configura un proyecto de Google Cloud y configura cuentas de servicio para acceder al proyecto.
Crea una configuración para un evento de transmisión en vivo con tu propio contenido en vivo o una prueba en vivo en tiempo real. En esta guía, se espera una transmisión HLS.
Ingresa las siguientes variables para usarlas en el SDK de IMA:- Ubicación
- La región de Google Cloud
donde se creó tu configuración activa:
LOCATION
- Número del proyecto
- El número de proyecto de Google Cloud con la API de Video Stitcher:
PROJECT_NUMBER
- Token de OAuth
El token de OAuth de corta duración de una cuenta de servicio con el usuario de Video Stitcher rol:
OAUTH_TOKEN
Más información sobre crear credenciales de corta duración para los servicios . El token de OAuth se puede volver a usar en varias solicitudes, siempre y cuando no haya vencido.
- Código de red
Este es el código de red de Ad Manager para solicitar anuncios:
NETWORK_CODE
- ID de configuración en vivo
- El ID de configuración en vivo que especificaste cuando creaste el evento de transmisión en vivo:
LIVE_CONFIG_ID
- Clave del activo personalizada
- La clave del recurso personalizado de Ad Manager que se generó durante el proceso de creación de una
configuración de un evento de transmisión en vivo
con la API de Video Stitcher:
CUSTOM_ASSET_KEY
Configura un entorno de desarrollo
Las aplicaciones de ejemplo de IMA solo realizan demostraciones de solicitudes de transmisión de HLS. Aún puedes seguir usando la forma de pago DASH
cuando se construye la clase VideoStitcherLiveStreamRequest
. Cuándo
Cuando configuras un reproductor compatible con DASH, debes establecer un objeto de escucha
los eventos de progreso del reproductor de video que pueden proporcionar los metadatos del video a
StreamManager.processMetadata()
Esta función tiene tres parámetros:
type
: Es una cadena que se debe configurar como'ID3'
para transmisiones HLS y'urn:google:dai:2018'
para transmisiones DASHdata
: Para los mensajes de eventos de DASH, es la cadena de datos del mensaje.timestamp
: Es un número que corresponde a la hora de inicio del mensaje del evento para DASH. transmisiones continuas.
Envía los metadatos tan pronto y con la frecuencia que los eventos de tu reproductor puedan proporcionar. Si si faltan metadatos o no son correctos, el SDK de IMA de DAI podría no activar eventos de anuncios lo que genera que los eventos de anuncios se informen de forma inadecuada.
Descargue los ejemplos de DAI de IMA para HTML5 y extrae el Ejemplo simple de HLS.js en una carpeta nueva Este ejemplo es una app web que puedes alojar a nivel local con fines de prueba.
Para alojar el ejemplo de manera local, navega a la carpeta nueva y ejecuta el siguiente comando: python para iniciar un servidor web:
python3 -m http.server 8000
http.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 ser compatible con HLS.js
biblioteca.
Si todo funciona correctamente, haz clic en el botón reproducir del video. jugador comienza el cortometraje "Lágrimas de acero" después de un anuncio breve. Este contenido es mediante una transmisión de video on demand (VOD).
Solicitar una transmisión en vivo
Para reemplazar la transmisión de VOD de muestra con tu transmisión en vivo, usa el
VideoStitcherLiveStreamRequest
que crea automáticamente una sesión de anuncios con Google Ad Manager. Puedes
Usar la IU de Google Ad Manager para encontrar las sesiones de DAI generadas para la supervisión y depuración
En la muestra existente, existen 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, necesitas
para agregar una nueva función que devuelva un
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
bucket, 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 sesiones de transmisión (opcional)
Personaliza tu solicitud de transmisión agregando opciones de sesión para anular el valor predeterminado.
Configuración de la API de Cloud Video Stitcher con
VideoStitcherLiveStreamRequest.videoStitcherSessionOptions
Si proporcionas una opción no reconocida, el servicio de
La API de Video Stitcher responderá con un error HTTP 400. Consulta el
guía de solución de problemas
para recibir asistencia.
Por ejemplo, puedes anular el opciones del manifiesto con el siguiente fragmento de código, que solicita dos manifiestos de transmisión con formatos ordenados de menor a mayor tasa de bits.
...
// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
"manifestOptions": {
"includeRenditions": [
{"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
{"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
],
"bitrateOrder": "ascending"
}
};
streamManager.requestStream(streamRequest);
Cómo insertar una pausa publicitaria
La API de Google Cloud Video Stitcher inserta anuncios recuperados de la etiqueta de anuncio para cada pausa publicitaria. Las pausas publicitarias se indican en el manifiesto con marcadores de anuncios. Los marcadores de anuncios son que insertaste el codificador de transmisión en vivo.
Si usas tu propia transmisión en vivo, debes insertar el marcador del anuncio. Para para obtener más información sobre los marcadores de anuncios HLS y DASH admitidos, consulte la documentación sobre marcadores de anuncios.
Si creaste una transmisión en vivo con la API de Google Cloud Livestream, 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 ya organizaste correctamente una transmisión en vivo con la API de Video Stitcher de Google Cloud y la solicitud con el SDK de IMA de DAI para HTML5, es importante que limpies todas las publicaciones de Google Cloud.
Sigue el limpieza de transmisión en vivo para quitar los recursos y recursos innecesarios.
Por último, en la ventana de la terminal donde iniciaste el servidor web de Python 3, usa
el comando ctrl+C
para finalizar el servidor local