用JS关闭html5视频控件

Posted 2023-03-14

【中文标题】用JS关闭html5视频控件

【英文标题】：Turn off html5 video controls with JS

【发布时间】：2011-05-06 11:45:26

【问题描述】：

我在 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');  
                       
    

【问题讨论】：

你可以在模态打开时删除整个视频吗？

【参考方案1】：

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

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

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

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