From a21b544f84ec1200b44d75e02fc33f5f49a03a0b Mon Sep 17 00:00:00 2001 From: Shawn Busolits Date: Wed, 16 May 2018 14:06:18 -0400 Subject: [PATCH] fix: Updated samples to work on iOS. (#613) --- examples/advanced/ads.js | 11 ++++++++--- examples/autoplay/ads.js | 21 ++++++++++++++++++++- examples/multiple/ads.js | 21 ++++++++++++++------- examples/playlist/ads.js | 10 +++++++--- examples/simple/ads.js | 12 +++++++++--- 5 files changed, 58 insertions(+), 17 deletions(-) diff --git a/examples/advanced/ads.js b/examples/advanced/ads.js index 08c25f08..c73525bf 100755 --- 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 index 4827863f..e76fc360 100644 --- 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 index 7148ea1e..a6554112 100644 --- 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 index bd8ae9a5..f562ebe5 100755 --- 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 index 2692b935..725a7685 100644 --- 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); +