Video.js + google IMA on mobile devices: 'tap' event causing errors

Question

I'm trying to implement displaying video ads using video.js and google's IMA plugin [videojs-ima][1]

In the example code there is following part:

// 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';
}

but when the startEvent is set to tap on mobile devices I get following errors:

Uncaught TypeError: document.createTouch is not a function(anonymous function) @ ima3.js:252Ha @ ima3.js:9zm @ ima3.js:252h.Ld @ ima3.js:253Ze @ ima3.js:68h.dispatchEvent @ ima3.js:66im.w @ ima3.js:243We @ ima3.js:63Se @ ima3.js:64(anonymous function) @ ima3.js:62
ima3.js:252 
Uncaught TypeError: Cannot read property 'apply' of undefined

When I comment out the line with startEvent = 'tap' I don't get these errors anymore, but some functionalities of video.js player are not working, i.e. I cannot pause video by clicking on the video area (I need to click on pause button, and that is hard on mobile devices).

How can I get this "tap" events working properly on mobile devices?

Answer 1

I've updated the issue on the videojs-ima github. Maybe my solution will be acceptable for you.

The main problem is when you click on the "play" button, the div "ima-ad-container" created by google-ima videojs plugin is above the videojs player.

So i made a detection for iPhone devices :

jQuery

if (navigator.userAgent.match(/iPhone/i)){
    $('#ima-ad-container').hide().css({'left':'-10000px','top':'-10000px'});
}

Javascript

if (navigator.userAgent.match(/iPhone/i)){
    var imaDom = document.getElementById('#ima-ad-container');
    imaDom.style.display='none';
    imaDom.style.left='-10000px';
    imaDom.style.top='-10000px';
}

you have to execute this code once the videojs-ima plugin is initialized, ie :

videojs('player').on('adsready', {
   });

I hope it can help you somehow, it worked for me :) Tested on iPhone 3G, iPhone 3GS, iPhone 4s, iPhone 5 & iPhone 6