Adverts with Google IMA

To test this feature and view the example code, please see the  Browsers SDK 1 Example Code Quick Start guide.

The CONNECT Player SDK for Browsers can be easily extended to support ad insertion. Google Interactive Media Ads (IMA) may be enabled using the open-source videojs-ima plugin, which supports linear advertisements in conjunction with content being played, and also supports companion ads. For more information about the plugin, see 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.

  XML

          <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.

  JS

      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.

  JS

     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.
The player should insert the specified ads when the stream plays.
The videojs-ima plugin also supports companion ads, see the companion-ads-IMA example code in the SDK.