Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

addEventListener Not working

See original GitHub issue

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

Issue Analytics

State:
Created 7 years ago
Comments:15 (8 by maintainers)

Top GitHub Comments

2reactions

shawnbusocommented, May 31, 2016

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!

0reactions

shawnbusocommented, Mar 20, 2018

Aha, glad you got it worked out 😃