javascript - 用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 标签实际上只是一个链接，用于打开设备的 native QuickTime 应用程序以播放视频 Assets 。这些设备的浏览器中没有“控件”的概念，因此添加或删除它们不会有任何作用。

在我目前专门从事在线视频的公司中，我不得不处理这个问题。我们在播放器小部件的 HTML5 版本中解决这个问题的“hacky”方法是绝对定位 VIDEO 标签的左侧样式为 -2000 像素(您可以选择任何您知道您的 VIDEO 标签永远不会匹配的适当大的像素数宽度)当小部件检测到用户正在使用 iPhone 或 iPod Touch 时。

由于 VIDEO 标签本身与用户观看视频 Assets 的方式无关，并且我们使用与 VIDEO 标签通常显示的位置内联的“海报”图像，因此用户不知道 VIDEO 标签的实际位置是(无论如何也不会真正关心)。