移动设备上的 Video.js + google IMA：“点击”事件导致错误答案

【问题标题】：Video.js + google IMA on mobile devices: 'tap' event causing errors移动设备上的 Video.js + google IMA：“点击”事件导致错误
【发布时间】：2016-07-04 23:07:48
【问题描述】：

我正在尝试使用 video.js 和谷歌的 IMA 插件 [videojs-ima][1] 来实现显示视频广告

example code 中有以下部分：

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

但是当startEvent 在移动设备上设置为tap 时，出现以下错误：

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

当我用startEvent = 'tap' 注释掉该行时，我不再收到这些错误，但video.js 播放器的某些功能不起作用，即我无法通过单击视频区域来暂停视频（我需要单击在暂停按钮上，这在移动设备上很难）。

如何让这个“点击”事件在移动设备上正常工作？

【问题讨论】：

标签： javascript video.js google-ima

【解决方案1】：

我已经在 videojs-ima github 上更新了这个问题。也许我的解决方案会被你接受。

主要问题是当你点击“播放”按钮时，由google-ima videojs插件创建的div“ima-ad-container”在videojs播放器上方。

所以我对 iPhone 设备进行了检测：

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

你必须在 videojs-ima 插件初始化后执行这段代码，即：

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

我希望它能以某种方式帮助你，它对我有用:) 在 iPhone 3G、iPhone 3GS、iPhone 4s、iPhone 5 和 iPhone 6 上测试

【讨论】：