Anuncios pre-roll del lado del cliente con Live SSAI y los SDK nativos

En este tema, aprenderá a utilizar los SDK nativos de Brightcove para reproducir anuncios pre-roll del lado del cliente con transmisiones en vivo habilitadas para la inserción de anuncios del lado del servidor (SSAI).

Resumen

Al entregar transmisiones en vivo con inserción de anuncios del lado del servidor (SSAI), puede solicitar pausas publicitarias durante el video utilizando el módulo en vivo. Para obtener más detalles, consulte la Uso de Live SSAI con los SDK nativos documento.

También puede incluir un anuncio previo al video antes de que comience la transmisión en vivo. Aquí es cuando los espectadores están comprometidos y dispuestos a sentarse a ver un anuncio corto. Con esta función, puede insertar anuncios IMA pre-roll del lado del cliente.

Requisitos

Los siguientes requisitos son necesarios para esta función:

Versión del SDK nativo de Brightcove

  • SDK nativo para Android 6.10.0 o superior
  • SDK nativo para iOS / tvOS 6.7.7 o superior

Plataforma

  • Cuenta habilitada para entrega dinámica

Implementación de anuncios IMA pre-roll con Live SSAI

Para reproducir un anuncio previo al video de IMA con una transmisión SSAI en vivo, siga estos pasos:

  1. Cree un evento en vivo habilitado para la inserción de anuncios del lado del servidor (SSAI). Para obtener más información, consulte lo siguiente:

  2. Utilice el complemento IMA para habilitar los anuncios pre-roll del lado del cliente. Para obtener más detalles, consulte la Implementación de anuncios del lado del cliente con los SDK nativos documento.

  3. Comience a transmitir.

Implementación de Android

Para esta función, utilizará los complementos IMA y SSAI:

Muestras de código

Para implementar esta función, revise los siguientes ejemplos:

Ejemplo

A continuación, se muestra un ejemplo de código que combina anuncios previos al video en vivo, SSAI e IMA:

/**
 * We start by adding some variables that are focused on the CSAI integration:
 * Also make the EventEmitter a global variable, it will be needed in the setupGoogleIMA method below
 */
private EventEmitter eventEmitter;
private GoogleIMAComponent googleIMAComponent;
private String adRulesURL = "YOUR_AD_RULES_URL";

private final String AD_CONFIG_ID_QUERY_PARAM_KEY = "ad_config_id";

// Note that for live SSAI streams, the adConfigId will start with the string "live."
// Ads will be injected into a live SSAI stream using the cue point API
private final String AD_CONFIG_ID_QUERY_PARAM_VALUE = "YOUR_AD_CONFIG_ID";

private SSAIComponent plugin;

/**
 * The BasicSSAISampleApp's onCreateMethod, with the setupGoogleIMA method from the AdRulesImaSampleApp added
 */
@Override
protected void onCreate(Bundle savedInstanceState) {
    setContentView(R.layout.ssai_activity_main);
    brightcoveVideoView = (BrightcoveExoPlayerVideoView) findViewById(R.id.brightcove_video_view);
    super.onCreate(savedInstanceState);

    eventEmitter = brightcoveVideoView.getEventEmitter();

    // Here we use the same setupGoogleIMA method as found in the AdRulesImaSampleApp:
    setupGoogleIMA();

    final EventEmitter eventEmitter = brightcoveVideoView.getEventEmitter();
    Catalog catalog = new Catalog(eventEmitter, YOUR_ACCOUNT_ID, YOUR_POLICY_KEY);

    // Setup the error event handler for the SSAI plugin.
    registerErrorEventHandler();
    plugin = new SSAIComponent(this, brightcoveVideoView);

    View view = findViewById(R.id.ad_frame);
    if (view instanceof ViewGroup) {
        // Set the companion ad container,
        plugin.addCompanionContainer((ViewGroup) view);
    }

    // Set the HttpRequestConfig with the Ad Config Id configured in
    // your https://studio.brightcove.com account.
    HttpRequestConfig httpRequestConfig = new HttpRequestConfig.Builder()
            .addQueryParameter(AD_CONFIG_ID_QUERY_PARAM_KEY, AD_CONFIG_ID_QUERY_PARAM_VALUE)
            .build();

    catalog.findVideoByID("YOUR_VIDEO_ID", httpRequestConfig, new VideoListener() {
        @Override
        public void onVideo(Video video) {
            // The Video Sources will have a VMAP url which will be processed by the SSAI plugin,
            // If there is not a VMAP url, or if there are any requesting or parsing error,
            // an EventType.ERROR event will be emitted.
            plugin.processVideo(video);
        }
    });
}

// The setupGoogleIMA method, for reference:

/**
 * Setup the Brightcove IMA Plugin.
 */
private void setupGoogleIMA() {
    // Establish the Google IMA SDK factory instance.
    final ImaSdkFactory sdkFactory = ImaSdkFactory.getInstance();

    // Enable logging up ad start.
    eventEmitter.on(EventType.AD_STARTED, new EventListener() {
        @Override
        public void processEvent(Event event) {
            Log.v(TAG, event.getType());
        }
    });

    // Enable logging any failed attempts to play an ad.
    eventEmitter.on(GoogleIMAEventType.DID_FAIL_TO_PLAY_AD, new EventListener() {
        @Override
        public void processEvent(Event event) {
            Log.v(TAG, event.getType());
        }
    });

    // Enable Logging upon ad completion.
    eventEmitter.on(EventType.AD_COMPLETED, new EventListener() {
        @Override
        public void processEvent(Event event) {
            Log.v(TAG, event.getType());
        }
    });

    // Set up a listener for initializing AdsRequests. The Google
    // IMA plugin emits an ad request event as a result of
    // initializeAdsRequests() being called.
    eventEmitter.on(GoogleIMAEventType.ADS_REQUEST_FOR_VIDEO, new EventListener() {
        @Override
        public void processEvent(Event event) {
            // Create a container object for the ads to be presented.
            AdDisplayContainer container = sdkFactory.createAdDisplayContainer();
            container.setPlayer(googleIMAComponent.getVideoAdPlayer());
            container.setAdContainer(brightcoveVideoView);

            // Build an ads request object and point it to the ad
            // display container created above.
            AdsRequest adsRequest = sdkFactory.createAdsRequest();
            adsRequest.setAdTagUrl(adRulesURL);
            adsRequest.setAdDisplayContainer(container);

            ArrayList<AdsRequest> adsRequests = new ArrayList<AdsRequest>(1);
            adsRequests.add(adsRequest);

            // Respond to the event with the new ad requests.
            event.properties.put(GoogleIMAComponent.ADS_REQUESTS, adsRequests);
            eventEmitter.respond(event);
        }
    });

    // Create the Brightcove IMA Plugin and pass in the event
    // emitter so that the plugin can integrate with the SDK.
    googleIMAComponent = new GoogleIMAComponent(brightcoveVideoView, eventEmitter, true);
}

Implementación de iOS

Para esta función, utilizará los complementos IMA y SSAI:

Muestras de código

Para implementar esta función, revise los siguientes ejemplos: