playlist/index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css"/>

    <script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
    <script src="application.js"></script>
    <script src="ads.js"></script>
    <script src="video_player.js"></script>

    <!-- GPT Companion Code -->
    <!-- Initialize the tagging library -->
     <script>
       var googletag = googletag || {};
       googletag.cmd = googletag.cmd || [];
       (function() {
         var gads = document.createElement('script');
         gads.async = true;
         gads.type = 'text/javascript';
         gads.src = 'https://www.googletagservices.com/tag/js/gpt.js';
         var node = document.getElementsByTagName('script')[0];
         node.parentNode.insertBefore(gads, node);
       })();
     </script>

     <!-- Register your companion slots -->
     <script>
       googletag.cmd.push(function() {
         // Supply YOUR_NETWORK/YOUR_UNIT_PATH in place of 6062/iab_vast_samples.
         googletag.defineSlot('/6062/iab_vast_samples', [728, 90], 'companionDiv')
             .addService(googletag.companionAds())
             .addService(googletag.pubads());
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
     </script>

    <title>IMA HTML5 SDK Playlist Demo</title>
  </head>
  <body>
  <div id="container">
    <header>IMA HTML5 SDK Playlist Demo</header>

    <div id="videoplayer">
      <video id="content">
        <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
      </video>
      <div id="adcontainer">
      </div>
      <button id="playpause" title="Play/Pause">&#9654;</button>
      <button id="replay" title="Replay">&#8634;</button>
      <button id="fullscreen" title="Full screen">[&nbsp;&nbsp;&nbsp;]</button>
    </div>

    <div id="customClick">
      <div id="customClickTextWrapper">Click here for more info on your ad.</div>
    </div>

    <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
    <div id="companionDiv">
      <script>
        // Using the command queue to enable asynchronous loading.
        // The unit will not actually display now - it will display when
        // the video player is displaying the ads.
        googletag.cmd.push(function() { googletag.display('companionDiv'); });
      </script>
    </div>

    <div id="playlistDiv">
      <div class="playlistItem">
        <img id="0" class="playlistImg" src="img/android_preview.jpg" />
        Video 1
      </div>
      <div class="playlistItem">
        <img id="1" class="playlistImg" src="img/doubleclick_preview.jpg" />
        Video 2
      </div>
    </div>

    <div id="console">
    Welcome to IMA HTML5 SDK Demo!
    </div>

    <footer>Copyright (C) 2013 Google Inc.</footer>
  </div>
  <script>
  var application = null;

  window.onload = function() {
    application = new Application();
  };
  </script>
  </body>
</html>