Question

我当前的项目是一个html网站，其中包含一个下拉菜单（javascript / jquery）和一个html5视频播放器（仅限视频标签）。

单击菜单条目时，下拉子菜单会覆盖videoplayer容器（下拉列表的z-index高于videoplayer）。在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上点击链接！

Answer 1

说明：如果启用了控件，html5视频播放器会吸收触摸事件。

背景：下拉时菜单覆盖了视频容器，但菜单项链接无法点击。

溶液：作为一种解决方法，我通过在菜单下拉时使用javascript删除html视频属性“控件”暂时禁用控件，并在菜单再次放弃时重新添加“控件”属性。

Answer 2

你的解释＆amp;解决方案是正确的对于某些代码感兴趣的人来禁用菜单下拉列表中的控件：

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

希望这有帮助！

Answer 3

更改属性并不总是有效。我已经发现将视频的不透明度改为0作品，如果你可以侥幸逃脱它。

Answer 4

我尝试删除控件然后重新添加它们，但仅适用于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);
});

Answer 5

您好我正在尝试通过使用iframe方法应用此修复程序的YouTube视频嵌入来解决此问题。

但是我无法更改原生HTML5视频元素上的控件属性，就像在YouTube上的iFrame中一样。

我甚至尝试在iFrame中定位视频元素，但我不知道这是因为同一个域名＆＃39;政策阻止我操纵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();
});

移动Safari：链接（<a>) element over video element does not work on click</a>

5 个答案: