Adverts with Google IMA

The Player SDK for Browsers can be easily extended to support ad insertion. The open-source videojs-ima plugin enables Google Interactive Media Ads (IMA). This supports linear advertisements in conjunction with content played by the player. It also supports companion ads. This page explains the steps you need to follow to implement ad integration, together with code examples. It should be used alongside the supplied sample code.

You can find more information about the plugin on its Github page.

Example code

Use npm to install videojs-ima and its dependencies.

  • Add the following links to the CSS and JavaScript files to your HTML file:

        <link rel="stylesheet" href="lib/videojs-contrib-ads/videojs-contrib-ads.css" />
        <link rel="stylesheet" href="lib/videojs-ima/videojs.ima.css" />
        <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
        <script src="lib/videojs-contrib-ads/videojs-contrib-ads.js"></script>
        <script src="lib/videojs-ima/videojs.ima.js"></script>
    
  • Once the player has been created (e.g., in the loaded callback), initialise the videojs-ima plugin with the ID of the video element:

    let playerInstance = otvplayer(
        "videoPlayer",
        // options
        {},
        // loaded callback
        function loadedCallback() {
            playerInstance.otvtoolkit();
            playerInstance.ima({
                id: "videoPlayer"
            });
        }
    );
    
  • Before setting the player source, set the ad tag URL. This specifies the ads to play:

        adTagUrl = "https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dlinear&correlator=";
        playerInstance.ima.changeAdTag(adTagUrl);
        playerInstance.ima.requestAds();
        playerInstance.src {
            src: "https://d3bqrzf9w11pn3.cloudfront.net/basic_dash_bbb_clear/bbb_public.mpd",
            type: "application/dash+xml"
        });
    

For a full list of ad tags, see https://support.google.com/dfp_premium/answer/1068325?hl=en.

When it plays the stream, the player should insert the specified ads as appropriate.

Companion ads

The videojs-ima plugin also supports companion ads. See the Companion Ads IMA example in the SDK for an example of how these can be added.