VAST-IMA-Player Playground

index.html

<div id="videoContainer">
  <video
    id="mediaElement"
    controls
    playsinline
    poster="https://glomex.github.io/vast-ima-player/big-buck-bunny.png"
    preload="none">
    <source type="video/mp4" src="https://glomex.github.io/vast-ima-player/big-buck-bunny.mp4"></source>
  </video>
  <!-- the ad-container needs to be placed above the video container -->
  <div id="adContainer"></div>
</div>
<button id="playLinearAdButton">Play Linear Ad</button>
  <button id="playNonLinearAdButton">Play NonLinear Ad</button>
  <button id="playVmapButton">Play VMAP</button>
  <button id="playVastWaterfall">Play VAST Waterfall</button>
<br>
  <button id="playButton">Play</button>
  <button id="pauseButton">Pause</button>
  <button id="toggleMuteButton">Mute / Unmute</button>
  <input id="volumeSlider" type="range" min="0" max="100">

script.babel

if(typeof google !== 'undefined'){
  initPlayground(google)
} else {
  console.log(`Looks like loading of Google's IMA SDK are blocked by your Ad blocker.`);
  console.log(`Please Turn Off Your Ad Blocker.`);
}

function initPlayground(google) {
  const playLinearAdButton = document.getElementById("playLinearAdButton");
  const playNonLinearAdButton = document.getElementById("playNonLinearAdButton");
  const playVmapButton = document.getElementById("playVmapButton");
  const playVastWaterfall = document.getElementById("playVastWaterfall");
  const playButton = document.getElementById("playButton");
  const pauseButton = document.getElementById("pauseButton");
  const toggleMuteButton = document.getElementById("toggleMuteButton");
  const volumeSlider = document.getElementById("volumeSlider");
  const adsRenderingSettings = new google.ima.AdsRenderingSettings();

  const vmap = `<?xml version="1.0" encoding="UTF-8"?>
  <VMAP xmlns:vmap="http://www.iab.net/vmap-1.0" version="1.0">
  <vmap:AdBreak timeOffset="start" breakType="linear" breakId="start-0">
    <vmap:AdSource id="start-0" allowMultipleAds="true" followRedirects="false">
      <vmap:VASTAdData>
      <VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="vast.xsd" version="3.0">
        <Ad sequence="1">
          <Wrapper>
            <AdSystem></AdSystem>
            <Error><![CDATA[https://error-pixel?[ERRORCODE]]]></Error>
            <VASTAdTagURI>
              <![CDATA[https://glomex.github.io/vast-ima-player/linear-ad.xml]]>
            </VASTAdTagURI>
          </Wrapper>
        </Ad>
        <Ad sequence="2">
          <Wrapper>
            <AdSystem></AdSystem>
            <Error><![CDATA[https://error-pixel?[ERRORCODE]]]></Error>
            <VASTAdTagURI>
              <![CDATA[https://glomex.github.io/vast-ima-player/linear-ad.xml]]>
            </VASTAdTagURI>
          </Wrapper>
        </Ad>
      </VAST>
      </vmap:VASTAdData>
    </vmap:AdSource>
  </vmap:AdBreak>
  <vmap:AdBreak timeOffset="00:01:00.000" breakType="linear" breakId="midroll-0">
    <vmap:AdSource id="midroll-0" allowMultipleAds="true" followRedirects="false">
      <vmap:VASTAdData>
        <VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="vast.xsd" version="3.0">
        <Ad>
          <Wrapper>
            <AdSystem></AdSystem>
            <Error><![CDATA[https://error-pixel?[ERRORCODE]]]></Error>
            <VASTAdTagURI>
              <![CDATA[https://glomex.github.io/vast-ima-player/linear-ad.xml]]>
            </VASTAdTagURI>
          </Wrapper>
        </Ad>
        </VAST>
      </vmap:VASTAdData>
    </vmap:AdSource>
  </vmap:AdBreak>
  <vmap:AdBreak timeOffset="end" breakType="linear" breakId="postroll-0">
    <vmap:AdSource id="postroll-0" allowMultipleAds="true" followRedirects="false">
      <vmap:VASTAdData>
        <VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="vast.xsd" version="3.0">
        <Ad>
          <Wrapper>
            <AdSystem></AdSystem>
            <Error><![CDATA[https://error-pixel?[ERRORCODE]]]></Error>
            <VASTAdTagURI>
              <![CDATA[https://glomex.github.io/vast-ima-player/linear-ad.xml]]>
            </VASTAdTagURI>
          </Wrapper>
        </Ad>
        </VAST>
      </vmap:VASTAdData>
    </vmap:AdSource>
  </vmap:AdBreak>
  </VMAP>`;

  const vastWaterfall = `<?xml version="1.0" encoding="UTF-8"?>
  <VAST xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="vast.xsd" version="3.0">
  <Ad>
    <Wrapper fallbackOnNoAd="true">
      <AdSystem></AdSystem>
      <Error><![CDATA[https://error-pixel?[ERRORCODE]]]></Error>
      <VASTAdTagURI>
        <![CDATA[]]>
      </VASTAdTagURI>
      <Extensions>
        <Extension type="waterfall" fallback_index="0"/>
      </Extensions>
    </Wrapper>
  </Ad>
  <Ad>
    <Wrapper fallbackOnNoAd="true">
      <AdSystem></AdSystem>
      <Error><![CDATA[https://error-pixel?[ERRORCODE]]]></Error>
      <VASTAdTagURI>
        <![CDATA[does-not-exist]]>
      </VASTAdTagURI>
      <Extensions>
        <Extension type="waterfall" fallback_index="1"/>
      </Extensions>
    </Wrapper>
  </Ad>
  <Ad>
    <Wrapper>
      <AdSystem></AdSystem>
      <Error><![CDATA[https://error-pixel?[ERRORCODE]]]></Error>
      <VASTAdTagURI>
        <![CDATA[https://glomex.github.io/vast-ima-player/linear-ad.xml]]>
      </VASTAdTagURI>
      <Extensions>
        <Extension type="waterfall" fallback_index="2"/>
      </Extensions>
    </Wrapper>
  </Ad>
  </VAST>`;

  const imaPlayer = new vastImaPlayer.Player(
    google.ima,
    document.getElementById("mediaElement"),
    document.getElementById("adContainer"),
    adsRenderingSettings
  );

  imaPlayer.addEventListener("MediaStart", () => {
    console.log("media start");
  });

  imaPlayer.addEventListener("MediaImpression", () => {
    console.log("media impression");
  });

  imaPlayer.addEventListener("MediaStop", () => {
    console.log("media stop");
  });

  imaPlayer.addEventListener("AdMetadata", () => {
    console.log("ad metadata", imaPlayer.cuePoints);
  });

  imaPlayer.addEventListener("AdStarted", (event) => {
    const adPodInfo = event.detail.ad.getAdPodInfo();
    console.log("ad started", adPodInfo);
  });

  imaPlayer.addEventListener("AdComplete", (event) => {
    const adPodInfo = event.detail.ad.getAdPodInfo();
    console.log("ad complete", adPodInfo);
  });

  imaPlayer.addEventListener("AdProgress", () => {
    console.log("ad timeupdate", imaPlayer.duration, imaPlayer.currentTime);
  });

  imaPlayer.addEventListener("timeupdate", () => {
    console.log("content timeupdate", imaPlayer.duration, imaPlayer.currentTime);
  });

  imaPlayer.addEventListener("ended", () => {
    console.log("content ended", imaPlayer.duration, imaPlayer.currentTime);
  });

  document.getElementById("mediaElement").muted = true;
  playLinearAdButton.addEventListener("click", function () {
    var playAdsRequest = new google.ima.AdsRequest();
    playAdsRequest.adTagUrl =
      "https://glomex.github.io/vast-ima-player/linear-ad.xml";
    imaPlayer.playAds(playAdsRequest);
  });

  playNonLinearAdButton.addEventListener("click", function () {
    var playAdsRequest = new google.ima.AdsRequest();
    playAdsRequest.adTagUrl =
      "https://glomex.github.io/vast-ima-player/nonlinear-ad.xml";
    imaPlayer.playAds(playAdsRequest);
  });

  playVmapButton.addEventListener("click", function () {
    var playAdsRequest = new google.ima.AdsRequest();
    playAdsRequest.adsResponse = vmap;
    imaPlayer.playAds(playAdsRequest);
  });

  playVastWaterfall.addEventListener("click", function () {
    var playAdsRequest = new google.ima.AdsRequest();
    playAdsRequest.adsResponse = vastWaterfall;
    imaPlayer.playAds(playAdsRequest);
  });

  playButton.addEventListener("click", function () {
    imaPlayer.play();
  });

  pauseButton.addEventListener("click", function () {
    imaPlayer.pause();
  });

  toggleMuteButton.addEventListener("click", function () {
    imaPlayer.muted = !imaPlayer.muted;
  });

  volumeSlider.value = String(imaPlayer.volume * 100 || 0);
  volumeSlider.addEventListener("change", function () {
    imaPlayer.volume = Number(volumeSlider.value) / 100 || 0;
  });
}

scripts

<script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="https://unpkg.com/@glomex/vast-ima-player@1/dist/vast-ima-player.umd.js"></script>
<script src="https://codepen.io/klipstein/pen/xxwQNZw.js"></script>

style.css

#videoContainer {
  width: 100%;
  max-width: 480px;
  position: relative;
}

#mediaElement {
  width: 100%;
  height: 100%;
}

#adContainer {
  position: absolute;
  pointer-events: none;
  left:0;
  top:0;
}

styles

<link href="https://codepen.io/klipstein/pen/xxwQNZw.css" rel="stylesheet" />

vast-ima-player-playground.markdown

VAST-IMA-Player Playground

A Pen by Anton Boyko on CodePen.

License.