使用JS关闭html5视频控件

Question

我遇到了html5视频控件的问题，该控件捕获了iOS中在它们之上发生的所有操作，这干扰了我需要在视频顶部显示的模式窗口。

我正在尝试自定义模式本身，但似乎无法使其正常工作。 基本上，当模式打开时，我需要执行以下操作：

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

当模式关闭时，我需要再次添加控件：

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

但是我似乎无法使其正常工作。 这是模态窗口相关部分的代码：

//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

问题是，在iPhone或iPod Touch上查看的网页上，VIDEO标签的占位符会贪婪地捕获所有事件，即使是来自更高“层”上的元素的事件也是如此。 在iPad或台式机环境中不会发生这种情况。

在iPhone和iPod Touch上，VIDEO标签实际上只是打开设备的本机QuickTime应用程序以播放视频资产的链接。 这些设备上的浏览器中没有“控件”的概念，因此添加或删除它们不会起作用。

我必须在目前的专营在线视频的公司中解决这个问题。 我们在播放器小部件的HTML5版本中解决此问题的“棘手”方法是将VIDEO标签绝对定位为-2000px的左侧样式（您可以选择任何适当的大量像素，这些像素知道您的VIDEO标签永远不会匹配当控件检测到用户正在使用iPhone或iPod Touch时。

由于VIDEO标签本身与用户观看视频资产的方式无关，我们使用内嵌“海报”图像的VIDEO标签通常显示在用户的位置，因此对于VIDEO标签的实际位置并不明智（并且无论如何都不会在乎）。