@playkit-js/playkit-js-ima
Version: 
[](https://github.com/kaltura/playkit-js-ima/actions/workflows/run_canary_full_flow.yaml) [ • 1.99 kB
HTML
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .button {
      height: 40px;
      width: 120px;
      font-size: 17px;
      margin: 10px;
    }
  </style>
  <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
  <script src="./playkit-ima.js"></script>
</head>
<body>
<div id="player-placeholder" style="width: 640px; height: 360px;"></div>
<button class="button" onclick="play()">Play</button>
<button class="button" onclick="pause()">Pause</button>
<button class="button" onclick="volumeUp()">Volume [+]</button>
<button class="button" onclick="volumeDown()">Volume [-]</button>
<button class="button" onclick="toggleMute()">Toggle Mute</button>
<button class="button" onclick="seek()">Seek [+5]</button>
<script>
  function play() {
    window.player.play();
  }
  function pause() {
    window.player.pause();
  }
  function volumeUp() {
    window.player.volume += 0.1;
  }
  function volumeDown() {
    window.player.volume -= 0.1;
  }
  function toggleMute() {
    window.player.muted = !window.player.muted;
  }
  function seek() {
    window.player.currentTime += 5;
  }
  window.player = Playkit.loadPlayer('player-placeholder', {
    playback: {
      playsinline: false,
      autoplay: false,
      muted: false
    },
    sources: {
      progressive: [
        {
          "mimetype": "video/mp4",
          "url": "https://cfvod.kaltura.com/pd/p/1726172/sp/172617200/serveFlavor/entryId/1_po3v31zx/v/1/ev/7/flavorId/1_67zt1djx/fileName/BBB_(Basic_Small_-_WEB_MBL_(H264_400)).mp4/name/a.mp4"
        }
      ]
    },
    plugins: {
      ima: {
        adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpostonlybumper&cmsid=496&vid=short_onecue&correlator='
      }
    }
  });
</script>
</body>
</html>