Integrating VAST and VPAID Ads

You can integrate VAST and VPAID ads with Player V4 using the VAST and VPAID Ad Plugin (ad_manager_vast.js).

Enabling the VAST/VPAID Ad Source(s) for Your Account

Before you can use VAST and VPAID ad integration:
  1. Log into the Ooyala Customer Portal.
  2. Submit a ticket requesting that the VAST and VPAID ad source be added to your Ooyala account.

Customizing the Ad Control Bar and Marquee Functionality

You can modify skin.json to customize ad control bar and ad marquee functionality for the VAST and VPAID plugin rendering VAST 2.0 or VAST 3.0 ads.
Note: For the VAST and VPAID plugin rendering VPAID 2.0 ads, the ad control bar and ad marquee configurations in skin.json are ignored (and are forcibly set to off) to avoid blocking ad interactivity.

Step 1: Create an Ad Set Using Backlot

After you have VAST and/or VPAID enabled enabled for your account, you can associate VAST and/or VPAID ad tags with your videos. For VAST and VPAID ads, you must create an ad set with Backlot using:

Note:
  • For Ad Source, choose VAST Compliant In-Stream. Disregard all other options with "VAST" in the name.
  • For this version, the steps for configuring VAST and VPAID ad sets are identical.

VAST Compliant In-Stream Ad Set

Field Description
Ad Set name You will enter a name for the ad set.
Ad Tag You will input your VAST 2.0 or VAST 3.0 ad tag here (this is provided by an ad server).
Ad Position Define where in the video stream the VAST ad should appear:
  • Pre-roll
  • In-stream (mid-roll): Include the time in seconds where the VAST tag will be called.
  • Post-roll
Tracking Pixel URL Use this field to track VAST ad impressions using your own or a 3rd-party URL.

LiveRail (VAST) In-Stream Ad Set

Field Description
Ad Set name You will enter a name for the ad set.
Ad Tag You will input your VAST 2.0 or VAST 3.0 ad tag here (this is provided by an ad server).
Tracking Pixel URL Use this field to track VAST ad impressions using your own or a 3rd-party URL.
Ad Position Define the time (in seconds) where the overlay ad should appear.

Step 2: Assign the Ad Set to an Asset Using Backlot or the Player API

Assign an ad set to an asset or multiple assets using:
  • Backlot UI: To assign your VAST ad set to a single asset, see Managing Monetization. For instructions on how to assign your VAST ad set to multiple assets, see Bulk Applying Settings.
  • Player API: With the Player API, you can associate an ad set with only an asset on your web page. To associate an ad set with an asset on multiple players, you must replicate the code for each player. See Assigning Ad Sets Dynamically for details.
  • Backlot API: With the Backlot API, you can associate an ad set with an asset more concretely. When you associate an asset with an ad set using the Backlot API, the asset and the ad set will be paired together on any player and page on which you play the asset. See Associate Ad Sets with Assets for details.

Step 3: Integrate the VAST and VPAID Plugin with the Ooyala Player on the Page

For every page on which you want to use the VAST and VPAID plugin with a player (regardless of how you associated VAST / VPAID ads with your videos):
Note: Wherever you see url_where_hosted in sample code, replace this (in your code) with the URL that points to where the resource is hosted. For a list of Ooyala-hosted paths, see Ooyala-hosted Player V4 Resources. The URL can point to a location on the same host (internal link) or on a separate host (prefixed with http:// or https://). If you host resources yourself (see Hosting Player V4 Resources), be sure to check for any path dependencies within the files.
  1. Add the ad_manager_vast.min.js script to the page where you are loading the player. You must load this plugin after you load core.min.js.
    <script language=“javascript" src="url_where_hosted/ad_manager_vast.min.js"></script>
  2. Use the Player V4 OO.Player.create function to create the player.
  3. Pass any global parameters. See Configuring Ad Parameters.
  4. Pass VAST ad tags to the Ooyala player using the vast parameter and its child parameters. See VAST-Specific Embedded Parameters for the list of key/value pairs you can use with the vast parameter.
Note: In this version, you can override only the Ad Tag setting with a page-level parameter (vast.tagUrl).
The following example shows how to use VAST and VPAID plugin page-level parameters with Player V4.
<!DOCTYPE html>
<html>
    <head>
        <title>VAST Example</title>
        <!-- V4 JS core is required. Plugins such as skin, discovery and Advertising need to be loaded separately -->
        <script src="url_where_hosted/core.min.js"></script>
        <script src="url_where_hosted/other-plugin/discovery_api.min.js"></script>
        <!-- Change these html5-skin.min.css and html5-skin.js to your local build if necessary -->
        <script src="url_where_hosted/html5-skin.min.js"></script>
        <link rel="stylesheet" href="url_where_hosted/html5-skin.min.css"/>
        <!-- A Video Plugin is required. This example shows the Main Video Plugin -->
        <script src="url_where_hosted/main_html5.min.js"></script>
        <!-- Ad module -->
        <script language=“javascript" src="url_where_hosted/ad_manager_vast.min.js"></script>
    </head>
    <body>
        <div id="container" style="width:640px; height:360px;"></div>
        <script>
            var playerParam = {
              "pcode": "YOUR_PCODE",
              "playerBrandingId": "YOUR_PLAYER_ID",
              "skin": {
                // Config contains the configuration setting for player skin. Change to your local config when necessary.
                "config": "url_where_hosted/skin.json"
              },
              "vast":{
                "tagUrl": "some_url"
              }
            };
            OO.ready(function() {
              window.pp = OO.Player.create("container", "YOUR_ASSET_ID", playerParam);
            }
                    );
        </script>
    <body>
</html>         

Was this article helpful?