Video Ads

Integrating your video content with Armanet's video ad network is straightforward and compatible with a wide range of open-source video players. As long as your video player supports VAST (Video Ad Serving Template), you can easily integrate and serve video ads through Armanet. Additionally, you can leverage the Google IMA SDK for more advanced ad functionalities.

What is VAST?

VAST (Video Ad Serving Template) is a standard protocol used to serve video ads across various players. It allows publishers to deliver video ads from a wide range of ad servers to their video content. The VAST format is widely supported, making it easy to integrate video ads with almost any video player that adheres to this standard.

If your video player supports VAST, you can integrate it with Armanet to serve ads seamlessly. Below is a list of supported video players and a step-by-step guide to integrate an external VAST tag URL with each one.

Include the Armanet SDK

Before making your first integration, you need to load our SDK. Include the Armanet SDK in the <head> section of your page using the following code:

<head>
  <script src="https://assets.armanet.us/armanet-pxl.js" defer></script>
</head>

To further optimize the loading time of ads, you can use dns-prefetch and preconnect link relations. These techniques allow the browser to perform DNS resolution and establish early connections to the adserver, reducing latency when the ads are loaded.

<head>
  <link rel="dns-prefetch" href="//i.armanet.us">
  <link rel="preconnect" href="https://i.armanet.us">
  <link rel="dns-prefetch" href="//srv.armanet.us">
  <link rel="preconnect" href="https://srv.armanet.us">
</head>

Integrating with Fluid Player

Step 1: Include Fluid Player in your HTML:

<link rel="stylesheet" href="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.css">
<script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>

Step 2: Initialize the player with your video content and VAST tag:

var myPlayer = fluidPlayer('my-video', {
  vastOptions: {
    adList: [
      {
        roll: 'preRoll',
        vastTag: Armanet.getVastTag('YOUR_AD_UNIT_CODE'),
      }
    ],
  }
});

Integrating with Video.js

Step 1: Include Video.js in your HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.6.1/video-js.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/8.6.1/video.min.js"></script>

<!-- Ads plugin for video.js -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/7.3.2/videojs.ads.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-ads/7.3.2/videojs.ads.min.js"></script>

Step 2: Initialize the videojsx-vast-plugin, which can be downloaded:

https://github.com/philipwatson/videojsx-vast-plugin

Step 3: Initialize the player with the plugin and VAST tag:

var player = videojs('vid1');
var companion = {
  elementId: 'companion',
  maxWidth: 300,
  maxHeight: 250
};

player.vast({url: Armanet.getVastTag('YOUR_AD_UNIT_CODE'), companion: companion});

Integrating with Shaka Player

Step 1: Include Shaka Player in your HTML:

<script src="https://ajax.googleapis.com/ajax/libs/shaka-player/3.3.1/shaka-player.ui.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/shaka-player/3.3.1/controls.css">
<script type="text/javascript" src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>

Step 2: Initialize the player with the VAST tag:

async function init() {
  // When using the UI, the player is made automatically by the UI object.
  const video = document.getElementById('video');
  const ui = video['ui'];
  const controls = ui.getControls();
  const player = controls.getPlayer();

  // Attach player and UI to the window to make it easy to access in the JS console.
  window.player = player;
  window.ui = ui;

  // Create new Ad Manager instance and attach to the UI
  const container = video.ui.getControls().getClientSideAdContainer();
  const adManager = player.getAdManager();
  adManager.initClientSide(container, video);

  // Create new Ad Request with Armanet VAST tag
  const adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = Armanet.getVastTag('YOUR_AD_UNIT_CODE');
  adManager.requestClientSideAds(adsRequest);

  try {
    const manifestUri = 'https://storage.googleapis.com/shaka-demo-assets/angel-one/dash.mpd';
    await player.load(manifestUri);
    console.log('The video has now been loaded!');
  } catch (error) {
    console.error('Error code', error.code, 'object', error);
  }
}

document.addEventListener('shaka-ui-loaded', init);

Integrating with JW Player

Step 1: Include JW Player in your HTML:

<script src="https://cdn.jwplayer.com/libraries/your-library-id.js"></script>

Step 2: Initialize the player with the VAST tag:

jwplayer('my-video').setup({
  file: 'https://example.com/video.mp4',
  advertising: {
    client: 'vast',
    tag: Armanet.getVastTag('YOUR_AD_UNIT_CODE'),
  }
});

Conclusion

Integrating your video content with Armanet's ad network is easy and flexible, supporting various open-source video players and VAST. Whether you choose Fluid Player, Video.js, Shaka Player, or JW Player, you can quickly get started with video ads by following the steps above. If you need advanced features, consider using the Google IMA SDK with your player for seamless ad experiences.

For further assistance, please refer to the respective video player documentation or contact our support team.