Disable html5 video control using JS

Question

I have a problem with html5 controls that capture any actions that occur on top of them in iOS, which prevents the modal window that I need to display on top of the video.

I am trying to configure the modal myself, but I can not get it to work. Basically, when the modal opens, I need to do:

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

And when the modal closes, I need to add controls again:

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

But I can’t make it work. Here is the code for the corresponding part of the modal window:

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

Answer 1

The problem is that the VIDEO tag placeholder on a web page viewed on an iPhone or iPod Touch eagerly captures all events even from elements located on a higher “layer”. This does not happen on the iPad or in the desktop environment.

On iPhone and iPod Touch, the VIDEO tag is just a link to open your device’s QuickTime application to play video ads. In these browsers there is no concept of "controls", so adding or removing them will not do anything.

I had to deal with this very problem in my current company, which specializes in online video. The "hacker" method that we used in the HTML5 version of our widget was to absolutely position the VIDEO tag with the left style of -2000px (you can choose any suitable number of pixels that, as you know, your VIDEO tag will never match wide) when the widget detects that the user is using an iPhone or iPod Touch.

Since the VIDEO tag itself has nothing to do with how the user will view the video object, and we use a “poster” with an embedded image, where the VIDEO tag usually shows the user, it’s not wiser about where the VIDEO tag (and actually anyway, it doesn't matter).