@bitmovin/player-integration-moat
Advanced tools
MOAT analytics integration for the Bitmovin Player
This integration currently is only compatible with the Bitmovin Yospace integration and FreeWheel, or with client-side FreeWheel ads.
First let's create a fresh build of the integration:
$ git clone https://github.com/bitmovin/bitmovin-player-web-analytics-moat.git$ cd bitmovin-player-web-analytics-moat$ npm install$ npm run buildTo run the example, located in
example/, typenpm 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 inindex.html.For the Yospace example, add
yospace.htmlto the URL in your browser. Please make sure to addyo-ad-management.min.jsandbitmovinplayer-yospace.jsto the directory first. Please also replace the placeholders with your Yospace stream URLs inyospace.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:
<!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_KEYwith 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();
<!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_KEYwith 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();
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
MOAT analytics integration for the Bitmovin Player
The npm package @bitmovin/player-integration-moat receives a total of 0 weekly downloads. As such, @bitmovin/player-integration-moat popularity was classified as not popular.
We found that @bitmovin/player-integration-moat demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.
Research
Security News
A threat actor's playbook for exploiting the npm ecosystem was exposed on the dark web, detailing how to build a blockchain-powered botnet.
Security News
NVD’s backlog surpasses 20,000 CVEs as analysis slows and NIST announces new system updates to address ongoing delays.