使用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標簽的實際位置並不明智（並且無論如何都不會在乎）。