Publicités pré-roll côté client avec SSAI en direct et SDK natifs

Dans cette rubrique, vous apprendrez comment utiliser les kits SDK natifs Brightcove pour lire des annonces pré-roll côté client avec des flux en direct activés pour l'insertion d'annonces côté serveur (SSAI).

Aperçu

Lors de la diffusion de flux en direct avec insertion d'annonces côté serveur (SSAI), vous pouvez demander des coupures publicitaires mid-roll à l'aide du module Live. Pour plus de détails, consultez le Utiliser Live SSAI avec les SDK natifs document.

Vous pouvez également inclure une annonce pré-roll avant le début de la diffusion en direct. C'est à ce moment-là que les téléspectateurs sont engagés et prêts à regarder une courte publicité. Avec cette fonctionnalité, vous pouvez insérer des annonces pré-roll IMA côté client.

Exigences

Les exigences suivantes sont nécessaires pour cette fonctionnalité :

Version du SDK natif Brightcove

  • SDK natif pour Android 6.10.0 ou supérieur
  • SDK natif pour iOS/tvOS 6.7.7 ou supérieur

Plate-forme

  • Compte activé pour la livraison dynamique

Implémentation d'annonces pré-roll IMA avec Live SSAI

Pour diffuser une annonce pré-roll IMA avec un flux SSAI en direct, procédez comme suit :

  1. Créez un événement en direct activé pour l'insertion d'annonces côté serveur (SSAI). Pour plus de détails, voir les points suivants :

  2. Utilisez le plug-in IMA pour activer les annonces pré-roll côté client. Pour plus de détails, consultez le Implémenter des publicités côté client avec les SDK natifs document.

  3. Commencez à diffuser.

Implémentation Android

Pour cette fonctionnalité, vous utiliserez à la fois les plugins IMA et SSAI :

Exemples de code

Pour implémenter cette fonctionnalité, consultez les exemples suivants :

Exemple

Voici un exemple de code qui combine des annonces preroll Live, SSAI et 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);
}

Implémentation iOS

Pour cette fonctionnalité, vous utiliserez à la fois les plugins IMA et SSAI :

Exemples de code

Pour implémenter cette fonctionnalité, consultez les exemples suivants :