$ git clone https://github.com/bitmovin/bitmovin-player-web-analytics-moat.git
$ cd bitmovin-player-web-analytics-moat
$ npm install
$ npm run build

To run the example, located in example/, type npm start, which will open the client-side ads example per default. Please make sure to replace the placeholders with your stream URLs and VMAP ad tag in index.html.

For the Yospace example, add yospace.html to the URL in your browser. Please make sure to add yo-ad-management.min.js and bitmovinplayer-yospace.js to the directory first. Please also replace the placeholders with your Yospace stream URLs in yospace.html.

Next, obtain the extension file from dist/bitmovinplayer-analytics-moat.js, as well as the MOAT initialization snippet from dist/moat.js', and include them in your page in the following order:

Client-side ads

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bitmovin Player Analytics MOAT Integration</title>
    <script type="text/javascript" src="//cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
    <script type="text/javascript" src="//cdn.bitmovin.com/player/web/8/modules/bitmovinplayer-advertising-bitmovin.js"></script>
    <script src="moat.js"></script>
    <script src="bitmovin-player-analytics-moat.js"></script>
  </head>
  <body>
    <div id="player"></div>
  </body>
</html>

First, we need to add the Bitmovin Advertising Module (BAM) to the site:

bitmovin.player.Player.addModule(bitmovin.player['advertising-bitmovin'].default);

Then we can initialize the Bitmovin Player with the integration. We already load the VMAP ad tag here as well:

var config = {
  key: 'YOUR-PLAYER-KEY',
  cast: {
    enable: true
  },
  logs: {
    level: 'debug'
  }
  advertising: {
    adBreaks: [{
      tag: {
        url: '//example.tld/path/to/vmap.ad.tag',
        type: 'vmap',
      },
    }],
  },
};

var container = ;

var player = new bitmovin.player.Player(document.getElementById('player'), config);
var moat = new bitmovin.player.analytics.MoatAnalytics(player, 'MOAT_CUSTOMER_KEY');

Please replace MOAT_CUSTOMER_KEY with your key.

Now everything is set up to load the player:

var playerSource = {
  title: 'Video Title',
  description: 'Video Description',
  dash: '//example.tld/path/to/manifest.mpd',
  poster: '//example.tld/path/to/poster.jpg',
};

player.load(playerSource).then(function() {
  console.log('Success loading Bitmovin Player source');
}).catch(function(reason) {
  console.error('Loading Bitmovin Player Source Failed:', reason);
});

If the player is not needed any more, don't forget to destroy it:

player.destroy();

Yospace

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bitmovin Player Analytics MOAT Integration</title>
    <script src="yo-ad-management.min.js"></script>
    <script src="bitmovinplayer-yospace.js"></script>
    <script src="moat.js"></script>
    <script src="bitmovinplayer-analytics-moat.js"></script>
    <script type="text/javascript" src="//cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.js"></script>
    <link rel="stylesheet" href="//cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.css">
  </head>
  <body>
    <div id="player"></div>
  </body>
</html>

Then we can initialize the Bitmovin Player with the integration:

var playerConfig = {
  key: 'YOUR-PLAYER-KEY',
  cast: {
    enable: true
  },
  logs: {
    level: 'debug'
  }
};

var yospaceConfig = {
  debug: true
};

var container = document.getElementById('player');

var player = new bitmovin.player.ads.yospace.BitmovinYospacePlayer(container, playerConfig, yospaceConfig);
bitmovin.playerui.UIFactory.buildDefaultUI(player);

var moat = new bitmovin.player.analytics.MoatAnalytics(player, 'MOAT_CUSTOMER_KEY');

Please replace MOAT_CUSTOMER_KEY with your key.

Now everything is set up to load the player and schedule ads:

var playerSource = {
  title: 'Video Title',
  description: 'Video Description',
  hls: '//example.tld/path/to/manifest.m3u8',
  poster: '//example.tld/path/to/poster.jpg',
  
  // Yospace config
  // VOD for on demand or LINEAR for live streams
  assetType: bitmovin.player.ads.yospace.YospaceAssetType.VOD
};

player.load(playerSource).then(function() {
  console.log('Success loading Bitmovin Player source');
}).catch(function(reason) {
  console.error('Loading Bitmovin Player Source Failed:', reason);
});

If the player is not needed any more, don't forget to destroy it:

player.destroy();

Configuration Options

A configuration object can be passed as additional, optional parameter to the MoatAnalytics constructor.

new bitmovin.player.analytics.MoatAnalytics(player, 'MOAT_CUSTOMER_KEY', configuration);

Available properties for the configuration:

{
  /**
   * Option to provide a callback function for parsing the string from the VAST AdExtension into
   * a MoatParam object or into MoatIds.
   */
  parseMoatStringsToObjects?: (moatStrings: string[]) => MoatIdsOrParam[];
}

FAQs

What is @bitmovin/player-integration-moat?

Is @bitmovin/player-integration-moat popular?

Is @bitmovin/player-integration-moat well maintained?

Package last updated on 09 Jul 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@bitmovin/player-integration-moat

Bitmovin Player MOAT Analytics Integration

Limitations

Usage

Client-side ads

Yospace

Configuration Options

Related posts

Supply Chain Attack on Rspack npm Packages Injects Cryptojacking Malware

Skuld Infostealer Returns to npm with Fake Windows Utilities and Malicious Solara Development Packages