移动Safari浏览器：链接（<a>）元素在视频元素上无法点击

我当前的项目是一个包含下拉菜单（javascript/jquery）和html5 videoplayer（仅限视频标签）的html网站。移动Safari浏览器：链接（<a>）元素在视频元素上无法点击

单击菜单条目时，下拉菜单覆盖了录像机容器（下拉的z-index高于录像机）。在Safari和Chrome中，子菜单条目的链接在点击时可以正常工作，但在iPad上的Mobile Safari中，它们不会作出反应。为了减少这个问题，我最小的例子包括一个覆盖视频元素的链接元素。

<head> 
<style> 
a { 
    position: absolute; 
    display: block; 
    z-index: 1; 
} 
video { 
    position: absolute; 
    z-index: 0; 
} 
</style>  
</head> 

<body > 
<a href="http://www.google.de">click me</a> 
<video src="" width="640" height="360" preload="none" controls="controls"></video> 
</body>

在iPad上触摸链接元素不起作用。任何建议赞赏如何使链接在iPad上点击！

来源

2011-03-10 jiriki

解释：如果启用了控件，html5视频播放器将吸收触摸事件。

background：菜单覆盖了视频容器，但菜单项链接不可点击。

解决方案：作为解决方法，我通过在菜单被删除时使用javascript去除html视频属性“controls”来临时禁用控件，并在菜单再次丢弃时重新添加“controls”属性。

来源

2011-06-08 13:13:01 jiriki

对于iPad，此解决方案有效。但是删除controls属性并不会改变iPhone Safari上视频对象的行为。它仍然捕获事件。 – emrahgunduz 2012-04-14 08:44:10

我在phonegap中使用Video标签，我没有'controls'属性，但我仍然没有点击注册。是否有其他解决方法？ – 2014-01-15 15:32:30

更改属性并不总是有效。我发现将视频的不透明度更改为0，如果可以避开它。

来源

2012-03-02 14:37:42 Brent

您还可以使用可见性：隐藏 – killebytes 2014-09-11 08:38:49

您的解释&解决方案是正确的。对于某些代码感兴趣的代码来禁用菜单下拉菜单上的控件：

$('#menu-dropdown').click(function() { 
    if ($("video:visible")) { 
    if ($("video").prop("controls")) { 
     $("video").prop("controls", false); 
    } else { 
     $("video").prop("controls", true) 
    } 
    } 
})

希望这有助于！

来源

2013-03-19 17:57:21 Devneck

我试着只是删除控件，然后再次添加它们，但只适用于iPad，在iPhone上是同样的事情。这是工作

$("#overlay_open").click(function(){ 
    $("video").prop("controls", false); 
    $("video").css("opacity", 0); 
}); 

$("#overlay_close").click(function(){ 
    $("video").prop("controls", true); 
    $("video").css("opacity", 1); 
});

来源

2014-04-24 10:33:33 Alex

你好我想与使用iframe的方法来应用此修复的YouTube视频嵌入到解决这个代码。

但是，我无法更改本地HTML5视频元素的控件属性，因为它在YouTube上的iFrame中。

我甚至试图瞄准iFrame中的视频元素，但这是不允许的我发现，由于'相同的域'政策阻止我操纵iFrame中的视频内容。

$(document).on('click', 'span.close', function(){ 
var button = $(this); 
var video = button.parent('.videowrap'); 

var iframe  = video.find("iframe"); 
var iframeVideo = iframe.contents().find("video"); 

console.log('iframe', iframe); 
console.log('iframeVideo', iframeVideo); 
console.log('iframeVideo prop controls', iframeVideo.prop("controls")); 

//http://stackoverflow.com/questions/5261079/mobile-safari-link-a-element-over-video-element-does-not-work-on-click 
if (iframeVideo.prop("controls")) { 
    iframeVideo.prop("controls", false); 
    iframeVideo.css("opacity", 0); 
} 


video.remove(); 
});

来源

2014-08-29 11:50:10

移动Safari浏览器：链接（<a>）元素在视频元素上无法点击

回答

相关问题