videojs-ima: addEventListener Not working

Hi dear, Can anyone help me please with addEventListener. It’s not firing at all… here is my code…

videojsPlayer.ima.addEventListener(google.ima.VOLUME_MUTED, function(){
    console.log(1111);
  });

I tried 
google.ima.VOLUME_MUTED or google.ima.AdEvent.Type.VOLUME_MUTED or google.ima.AdEvent.VOLUME_MUTED

and not for only VOLUME_MUTED, does not work for any event

full code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link href="https://vjs.zencdn.net/5.9.2/video-js.css" rel="stylesheet">
  <!-- social share/resolution -->
  <link href="videojs-resolution-switcher.css" rel="stylesheet">
  <!-- ads loads -->
  <link href="ima/videojs.ads.css" rel="stylesheet">
  <!--   ima load  -->
  <link href="ima/videojs.ima.css" rel="stylesheet">

</head>
<body>
  <video id="videojsPlayer" class="video-js vjs-default-skin"
      controls preload="auto" width="640" height="360"
      poster="https://d1sinn63yldtx0.cloudfront.net/thumbnails/thumbnails-ed_SBQceGipWuIxIxHA-00002.jpg"
      >
    <source src="test3.mp4" type="video/mp4" label="HD" res='720'/>
    <p class="vjs-no-js"> To view this video please enable JavaScript, and consider upgrading to a modern web browser</p>
  </video>
  <script src="https://vjs.zencdn.net/5.9.2/video.js"></script>
  <!-- ads loads js -->
  <script src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
  <!-- ima loads js -->
  <script src="ima/videojs.ads.js"></script>
  <script src="ima/videojs.ima.js"></script>




<script>
  //add fb and twitter share button
  var videojsPlayer = videojs('videojsPlayer');

  //=================================
  // image ads load
  videojsPlayer.ima({
    id: 'videojsPlayer',
    adTagUrl: 'https://googleads.g.doubleclick.net/pagead/ads?ad_type=video&client=ca-video-pub-4968145218643279&videoad_start_delay=0&description_url=http%3A%2F%2Fwww.google.com&max_ad_duration=40000&adtest=on'
  });


  // Remove controls from the player on iPad to stop native controls from stealing
  // our click
  var contentPlayer =  document.getElementById('videojsPlayer');
  if ((navigator.userAgent.match(/iPad/i) ||
        navigator.userAgent.match(/Android/i)) &&
      contentPlayer.hasAttribute('controls')) {
    contentPlayer.removeAttribute('controls');
  }

  // Initialize the ad container when the video player is clicked, but only the
  // first time it's clicked.
  var startEvent = 'click';
  if (navigator.userAgent.match(/iPhone/i) ||
      navigator.userAgent.match(/iPad/i) ||
      navigator.userAgent.match(/Android/i)) {
    startEvent = 'tap';
  }

  videojsPlayer.one(startEvent, function() {
      videojsPlayer.ima.initializeAdDisplayContainer();
      videojsPlayer.ima.requestAds();
      videojsPlayer.play();
  });
  //end of ima loads




  //=======================================
  //=======================================
  //=======================================
  //=======================================
   videojsPlayer.ima.addEventListener(google.ima.VOLUME_MUTED, function(){
    console.log(1111);
  });

</script>
</body>
</html>

demo : https://editorsdepot.com/video/videojs/product.php

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 15 (8 by maintainers)

Most upvoted comments

It looks like you’re trying to add the listener before the adsManager exists, which is causing an issue. This could definitely be better documented on our end. To get this to work you’ll need to use a custom adsManagerLoaded callback like we do in the advanced sample here. You could accomplish this with something like this - change your IMA plugin initialization to the following:

videojsPlayer.ima(
    {
      id: 'videojsPlayer',
      adTagUrl: 'https://googleads.g.doubleclick.net/pagead/ads?ad_type=video&client=ca-video-pub-4968145218643279&videoad_start_delay=0&description_url=http%3A%2F%2Fwww.google.com&max_ad_duration=40000&adtest=on'
    },
    // This will be called when the adsManager has loaded
    function() {
      videojsPlayer.ima.addEventListener(google.ima.AdEvent.Type.VOLUME_MUTED,                                                       
          function(){
            console.log(1111);
          }
      );
      // You need to call this after you're done here to play the ad(s)
      videojsPlayer.ima.startFromReadyCallback();
    }
    );

You can then remove your call to add the event listener at the bottom of your current code. Let me know if that helps!

shawnbuso on May 31, 2016