Desactive los controles de video html5 con JS

Tengo un problema con los controles de video html5 que capturan cualquier acción que ocurra encima de ellos en iOS, lo que está interfiriendo con una window modal que necesito mostrar encima del video.

Estoy tratando de personalizar el modal en sí, pero parece que no puede hacerlo funcionar. Básicamente, cuando se abre el modal, necesito hacer:

var video = document.getElementById("videocontainer"); video.removeAttribute("controls"); 

Y cuando el modal se cierra, tengo que volver a agregar los controles:

 var video = document.getElementById("videocontainer"); video.setAttribute("controls","controls"); 

Pero no puedo hacer que funcione. Aquí está el código de la parte relevante de la window modal:

 //Entrance Animations function openModal() { modalBG.unbind('click.modalEvent'); $('.' + options.dismissmodalclass).unbind('click.modalEvent'); if(!locked) { lockModal(); if(options.animation == "fadeAndPop") { modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'}); modalBG.fadeIn(options.animationspeed/2); modal.delay(options.animationspeed/2).animate({ "top": $(document).scrollTop()+topMeasure, "opacity" : 1 }, options.animationspeed,unlockModal()); } if(options.animation == "fade") { modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure}); modalBG.fadeIn(options.animationspeed/2); modal.delay(options.animationspeed/2).animate({ "opacity" : 1 }, options.animationspeed,unlockModal()); } if(options.animation == "none") { modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure}); modalBG.css({"display":"block"}); unlockModal() } } } //Closing Animation function closeModal() { if(!locked) { lockModal(); if(options.animation == "fadeAndPop") { modalBG.delay(options.animationspeed).fadeOut(options.animationspeed); modal.animate({ "top": $(document).scrollTop()-topOffset, "opacity" : 0 }, options.animationspeed/2, function() { modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'}); unlockModal(); }); } if(options.animation == "fade") { modalBG.delay(options.animationspeed).fadeOut(options.animationspeed); modal.animate({ "opacity" : 0 }, options.animationspeed, function() { modal.css({'opacity' : 1, 'visibility' : 'hidden', 'top' : topMeasure}); unlockModal(); }); } if(options.animation == "none") { modal.css({'visibility' : 'hidden', 'top' : topMeasure}); modalBG.css({'display' : 'none'}); } } } 

El problema es que el marcador de position para la label VIDEO en una página web vista en un iPhone o iPod Touch captura con avidez todos los events, incluso desde elementos que están en una "capa" más alta. Esto no ocurre en el iPad o en un entorno de escritorio.

En el iPhone y iPod Touch, la label VIDEO es efectivamente un enlace para abrir la aplicación nativa QuickTime del dispositivo para reproducir el recurso de video. No existe un concepto de "controles" dentro del browser en estos dispositivos, por lo que agregarlos o eliminarlos no hará nada.

Tuve que lidiar con este problema en mi compañía actual, que se especializa en video en línea. La forma "hacky" que obtuvimos en la versión HTML5 de nuestro widget de jugador fue colocar la label VIDEO con un estilo izquierdo de -2000px (puedes elegir cualquier cantidad de píxeles suficientemente grande que sabes que tu label VIDEO nunca coincidirá en ancho) cuando el widget detecta que el usuario está utilizando un iPhone o iPod Touch.

Dado que la label VIDEO en sí misma no tiene nada que ver con la forma en que el usuario verá el recurso de video y usamos una image de "póster" en línea donde la label VIDEO normalmente aparece, el usuario no es más sabio acerca de dónde realmente está la label VIDEO (y no me importaría, de todos modos).