Video.js + Google IMA sur les appareils mobiles: des erreurs 'tap' événement provoquant

Question

Je suis en train de mettre en œuvre l'affichage d'annonces vidéo à l'aide video.js et le plug-in IMA Google [videojs-ima][1]

Dans le example code on suit une partie:

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

mais quand le startEvent est réglé sur tap sur les appareils mobiles que je reçois des erreurs suivantes:

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 

Quand je commente la ligne avec startEvent = 'tap' je ne reçois plus ces erreurs, mais certaines fonctionnalités du video.js ne fonctionnent pas, c'est à dire je ne peux pas mettre en pause la vidéo en cliquant sur la zone vidéo (je dois cliquer sur le bouton pause, et est difficile sur les appareils mobiles).

Comment puis-je faire fonctionner correctement ces événements "tap" sur les appareils mobiles?

Answer 1

J'ai mis à jour le problème sur le github videojs-ima. Peut-être que ma solution sera acceptable pour vous.

Le problème principal est lorsque vous cliquez sur le bouton "play", le div "ima-ad-container" créé par le plugin google-ima videojs est au dessus du player videojs.

donc je l'ai fait une détection pour les appareils 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'; 
} 

vous devez exécuter ce code une fois le plug-in videojs-ima est initialisé, à savoir:

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

J'espère que cela peut vous aider en quelque sorte, cela a fonctionné pour moi :) Testé sur iPhone 3G, iPhone 3GS, iPhone 4s, iPhone 5 & iPhone 6