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版本中解决这个问题的“hacky”方式是将VIDEO标签绝对定位为左侧样式-2000px（您可以选择任何适当大量的像素，您知道您的VIDEO标签永远不会匹配当小部件检测到用户正在使用iPhone或iPod Touch时，其宽度）。

由于VIDEO标签本身与用户查看视频资产的方式无关，我们使用内联的“海报”图片，VIDEO标签通常显示的位置，用户对于VIDEO标签的实际位置并不明智是（反正也不会在意）。

使用JS关闭html5视频控件

1 个答案: