fix: Updated samples to work on iOS. (googleads#613)

Bhanditz · May 16, 2018 · a21b544 · a21b544
1 parent b87735f
commit a21b544
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 17 deletions.
diff --git a/examples/advanced/ads.js b/examples/advanced/ads.js
@@ -36,13 +36,17 @@ var Ads = function() {
 
   // Start ads when the video player is clicked, but only the first time it's
   // clicked.
-  var startEvent = 'click';
+  this.startEvent = 'click';
   if (navigator.userAgent.match(/iPhone/i) ||
       navigator.userAgent.match(/iPad/i) ||
       navigator.userAgent.match(/Android/i)) {
-    startEvent = 'touchend';
+    this.startEvent = 'touchend';
   }
-  this.player.one(startEvent, this.init.bind(this));
+
+
+  this.wrapperDiv = document.getElementById('content_video');
+  this.boundInit = this.init.bind(this);
+  this.wrapperDiv.addEventListener(this.startEvent, this.boundInit);
 
   var options = {
     id: 'content_video',
@@ -66,6 +70,7 @@ Ads.prototype.init = function() {
     this.player.ima.initializeAdDisplayContainer();
     this.player.ima.setContentWithAdTag(null, this.adTagInput.value, false);
     this.player.ima.requestAds();
+    this.wrapperDiv.removeEventListener(this.startEvent, this.boundInit);
   }
 };
 

diff --git a/examples/autoplay/ads.js b/examples/autoplay/ads.js
@@ -18,6 +18,8 @@
 
 var autoplayAllowed = false;
 var autoplayRequiresMute = false;
+var player;
+var wrapperDiv;
 
 function checkUnmutedAutoplaySupport() {
   canAutoplay
@@ -58,7 +60,7 @@ function initPlayer() {
     muted: autoplayRequiresMute,
     debug: true
   }
-  var player = videojs('content_video', vjsOptions);
+  player = videojs('content_video', vjsOptions);
 
   var imaOptions = {
     id: 'content_video',
@@ -70,6 +72,23 @@ function initPlayer() {
 
   };
   player.ima(imaOptions);
+
+  if (!autoplayAllowed) {
+    if (navigator.userAgent.match(/iPhone/i) ||
+        navigator.userAgent.match(/iPad/i) ||
+        navigator.userAgent.match(/Android/i)) {
+      startEvent = 'touchend';
+    }
+
+    wrapperDiv = document.getElementById('content_video');
+    wrapperDiv.addEventListener(startEvent, initAdDisplayContainer);
+  }
+}
+
+function initAdDisplayContainer() {
+    player.ima.initializeAdDisplayContainer();
+    wrapperDiv.removeEventListener(startEvent, initAdDisplayContainer);
 }
 
+var startEvent = 'click';
 checkUnmutedAutoplaySupport();
diff --git a/examples/multiple/ads.js b/examples/multiple/ads.js
@@ -22,7 +22,7 @@ function pause(id) {
 var Player = function(id) {
   this.id = id;
   this.init = function() {
-    var player = videojs(this.id);
+    this.player = videojs(this.id);
 
     var options = {
       id: id,
@@ -33,7 +33,7 @@ var Player = function(id) {
           'vid=short_onecue&correlator='
     };
 
-    player.ima(options);
+    this.player.ima(options);
 
     // Remove controls from the player on iPad to stop native controls from stealing
     // our click
@@ -46,16 +46,23 @@ var Player = function(id) {
 
     // Initialize the ad container when the video player is clicked, but only the
     // first time it's clicked.
-    var startEvent = 'click';
+    this.startEvent = 'click';
     if (navigator.userAgent.match(/iPhone/i) ||
         navigator.userAgent.match(/iPad/i) ||
         navigator.userAgent.match(/Android/i)) {
-      startEvent = 'touchend';
+      this.startEvent = 'touchend';
     }
 
-    player.one(startEvent, function() {
-        player.ima.initializeAdDisplayContainer();
-    });
+    this.wrapperDiv = document.getElementById(this.id);
+    this.boundInitAdDisplayContainer = this.initAdDisplayContainer.bind(this);
+    this.wrapperDiv.addEventListener(
+        this.startEvent, this.boundInitAdDisplayContainer);
+  }
+
+  this.initAdDisplayContainer = function() {
+    this.player.ima.initializeAdDisplayContainer();
+    this.wrapperDiv.removeEventListener(
+        this.startEvent, this.boundInitAdDisplayContainer);
   }
 }
 

diff --git a/examples/playlist/ads.js b/examples/playlist/ads.js
@@ -28,13 +28,15 @@ var Ads = function() {
 
   // Start ads when the video player is clicked, but only the first time it's
   // clicked.
-  var startEvent = 'click';
+  this.startEvent = 'click';
   if (navigator.userAgent.match(/iPhone/i) ||
       navigator.userAgent.match(/iPad/i) ||
       navigator.userAgent.match(/Android/i)) {
-    startEvent = 'touchend';
+    this.startEvent = 'touchend';
   }
-  this.player.one(startEvent, this.initFromStart.bind(this));
+  this.wrapperDiv = document.getElementById('content_video');
+  this.boundInitFromStart = this.initFromStart.bind(this);
+  this.wrapperDiv.addEventListener(this.startEvent, this.initFromStart.bind(this));
 
   this.options = {
     id: 'content_video',
@@ -77,6 +79,8 @@ var Ads = function() {
 Ads.prototype.initFromStart = function() {
   if (!this.initialized) {
     this.init();
+    this.wrapperDiv.removeEventListener(
+        this.startEvent, this.boundInitFromStart);
   }
 }
 

diff --git a/examples/simple/ads.js b/examples/simple/ads.js
@@ -38,12 +38,18 @@ if ((navigator.userAgent.match(/iPad/i) ||
 
 // Initialize the ad container when the video player is clicked, but only the
 // first time it's clicked.
+var initAdDisplayContainer = function() {
+  player.ima.initializeAdDisplayContainer();
+  wrapperDiv.removeEventListener(startEvent, initAdDisplayContainer);
+}
+
 var startEvent = 'click';
 if (navigator.userAgent.match(/iPhone/i) ||
     navigator.userAgent.match(/iPad/i) ||
     navigator.userAgent.match(/Android/i)) {
   startEvent = 'touchend';
 }
-player.one(startEvent, function() {
-    player.ima.initializeAdDisplayContainer();
-});
+
+var wrapperDiv = document.getElementById('content_video');
+wrapperDiv.addEventListener(startEvent, initAdDisplayContainer);
+