Mobile Safari：视频元素上的链接 () 元素在点击时不起作用

发布于 2024-10-21 09:10:54 字数 680 浏览 2 评论 0原文

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

单击菜单项时，下拉子菜单会覆盖视频播放器容器（下拉列表的 z 索引高于视频播放器的 z 索引）。在 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 上可点击的建议都很感激！

原文

my current project is a html website that contains a dropdown menu (javascript/jquery) and a html5 videoplayer (video-tag only).

When clicking on a menu entry, the dropdown submenu overlays the videoplayer container (z-index of dropdown is higher than of videoplayer). In Safari and Chrome the links of the submenu entries work properly on click, but in Mobile Safari on iPad they do not react. To reduce the problem, my minimal example includes a link element that overlays a video element.

<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>

Touching the link element on an iPad does not work. Any advice appreciated how to make the link clickable on iPad!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

无人问我粥可暖 2024-10-28 09:10:54

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

背景：
菜单在下拉时覆盖视频容器，但菜单项链接不可单击。

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

回复收藏 0 原文

貪欢 2024-10-28 09:10:54

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

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

希望这有帮助！

Your explanation & solution are correct. For someone interested in some code to disable the controls on the menu dropdown:

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

Hope this helps!

回复收藏 0 原文

倚栏听风 2024-10-28 09:10:54

更改属性并不总是有效。我发现将视频的不透明度更改为 0 是可行的，如果你能做到的话。

回复收藏 0 原文

如日中天 2024-10-28 09:10:54

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

I tried just removing the controls and then add them again, but works only on iPad, on iPhone was the same thing. This is the code that worked

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

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

回复收藏 0 原文

〃温暖了心ぐ 2024-10-28 09:10:54

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

但是，我无法更改本机 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();
});

Hello I am trying to resolve this with a YouTube Video Embed that is using the iframe method to apply this fix.

However I cannot change the controls property on the native HTML5 Video element as it is in an iFrame on YouTube.

I even tried targeting the video element in the iFrame, but this is not allowed I found out due to 'same domain' policy preventing me to manipulate the contents of the video in the 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();
});

回复收藏 0 原文

~没有更多了~