移动Safari：点击视频元素上的链接（<a>）无效。

Question

移动Safari：点击视频元素上的链接（<a>）无效。

17

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

当点击菜单条目时，下拉子菜单会覆盖视频播放器容器（下拉菜单的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上可点击！

- jiriki

5个回答

6

你的解释和解决方案是正确的。如果有人对禁用菜单下拉列表上的控件感兴趣，可以参考以下代码：

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

希望这可以帮到您！

- Devneck

2

我尝试只是删除控件，然后再添加它们，但这只在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);
});

- Alex

2

更改属性并不总是有效的。如果可以使用，我发现将视频的不透明度更改为0会起作用。

- Brent

你可以使用 visibility: hidden。 - killebytes

0

你好，我正在尝试使用iframe方法解决YouTube视频嵌入的问题。

然而，由于YouTube视频在iFrame中，因此无法更改本地HTML5视频元素上的控件属性。

我甚至尝试定位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"));

//https://dev59.com/gm435IYBdhLWcg3wtSYV
if (iframeVideo.prop("controls")) {
    iframeVideo.prop("controls", false);
    iframeVideo.css("opacity", 0);
}


video.remove();
});

- Warren Buckley

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jiriki · Accepted Answer

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

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

解决方案：作为解决方法，我使用JavaScript临时删除HTML视频属性"controls"以禁用控件，当菜单下拉时，并在菜单上升时重新添加"controls"属性。