JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 45
  • Score
    100M100P100Q80338F
  • License Apache-2.0

HTML5 Video Ads Manager based on vast-client-js and IMA SDK

Package Exports

  • ads-manager
  • ads-manager/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ads-manager) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

license

ads-manager

HTML5 Video Ads Manager based on vast-client-js and IMA SDK

This README is for developers who want to use and/or contribute to ads-manager.

Table of Contents

Usage

import { AdsManager } from './ads-manager';

// Get your video element
let videoElement = document.getElementById('video');
// Get your HTML element for ad-container
let adContainer = document.getElementById('ad-container');
// Define ads manager and pass ad container
const adsManager = new AdsManager(adContainer);
// Subscribe for events
// AdsManagerLoaded
adsManager.addEventListener('AdsManagerLoaded', function() {
  // Get height and width of your video element
  let width = videoElement.clientWidth;
  let height = videoElement.clientHeight;
  let viewMode = 'normal'; // fullscreen
  // Init
  try {
    adsManager.init(width, height, viewMode);
  } catch (adError) {
    // Play your context without ads, if an error occurs
  }
});
// AdError
adsManager.addEventListener('AdError', function(adError) {
  if(adsManager) {
    adsManager.destroy();
  }
  // ... 
});
// AdLoaded
adsManager.addEventListener('AdLoaded', function(adEvent) {
  // Ad loaded, awaiting start
  // Check if ad type is linear
  if(adEvent.type === 'linear') {
    try {
      // Start ad
      adsManager.start();
    } catch (adError) {
      // Play video content without ads in case of error
    }
  } else {
    // Ad is not linear
  }
});
// AdStarted
adsManager.addEventListener('AdStarted', function() {
  // Pause your video content
  videoElement.pause();
});
// ...
// AdDurationChange
// AdSizeChange
// AdImpression
// AdVideoStart
// AdVideoFirstQuartile
// AdVideoMidpoint
// AdVideoThirdQuartile
// AdVideoComplete
// AdPaused
// AdPlaying
// AdStopped
// AdSkipped
// AdClickThru
// ...
// AllAdsCompleted
adsManager.addEventListener('AllAdsCompleted', function() {
  // Play your video content
  videoElement.play();
});


// VAST tag url
let vastUrl = 'your VAST tag url';

// Request Ads
adsManager.requestAds(vastUrl);

/*
// VAST XML
let vastXML = `<?xml version="1.0" encoding="UTF-8"?>
    <VAST version="2.0">
      <Error><![CDATA[http://example.com/empty-no-ad]]></Error>
    </VAST>`;
adsManager.requestAds(vastXML);
 */

Pre-bundled versions

Browser script

A pre-bundled version of ads-manager is available: ads-manager.js [minified].

You can add the script directly to your page and access the library's components through the ssp4.tv object.

<script src="ads-manager.js"></script>
// Get your HTML element for ad container
let adContainer = document.getElementById('ad-container');
// Define ads manager and pass ad container
const adsManager = new ssp4.tv.AdsManager(adContainer);

Install

$ git clone https://github.com/basil79/ads-manager
$ cd ads-manager
$ npm ci

Build

To build the project for development:

$ npm run build:dev

To build the project for production:

$ npm run build:prod

This will generate the following file:

  • ./dist/ads-manager.js - Minified production code

Run

$ npm start

Then navigate to: http://localhost:8081 in your browser

Supported Browsers

ads-manager is supported all modern browsers.

Contribute

See CONTRIBUTING