javascript – 用JS关闭html5视频控件

2019年8月3日 360次阅读

我有一个问题,
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'});  
        }               
    }
}

最佳答案 问题是,在iPhone或iPod Touch上查看的网页上的VIDEO标记的占位符贪婪地捕获所有事件,甚至是来自更高“层”的元素.这不会发生在iPad或桌面环境中.

在iPhone和iPod Touch上,VIDEO标签实际上只是一个链接,用于打开设备的原生QuickTime应用程序以播放视频资产.这些设备上的浏览器中没有“控件”的概念,因此添加或删除它们将不会执行任何操作.

我不得不在我现在专门从事在线视频的公司处理这个问题.该“哈克”的方式我们在播放器窗口小部件的HTML5版本解决此得到的是绝对定位与-2000px的左风格的视频标签(你可以选择任何适合的大量,你知道你的视频标签永远不会匹配像素当小部件检测到用户正在使用iPhone或iPod Touch时,宽度).

由于视频标签本身无关的用户将如何看待视频资产,我们行内用“大字报”的图像与在视频标签通常显示出用户是没有哪里的视频标签实际上是明智的(和无论如何,我真的不在乎).

点赞