移动设备上的Video.js + google IMA:'点击'事件导致错误

时间:2016-05-11 09:26:15

标签: javascript video.js google-ima

我尝试使用video.js和Google的IMA插件[{1}}

来实施视频广告的展示

example code中有以下部分:

[videojs-ima][1]

但是当移动设备上的// 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'播放器的某些功能无效,即我无法通过点击视频暂停视频区域(我需要点击暂停按钮,这在移动设备上很难)。

我怎样才能得到这个"点击"事件在移动设备上正常运行?

1 个答案:

答案 0 :(得分:0)

我已经在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