Mobile Safari: элемент ссылки (<a>) над элементом видео не работает при нажатии - PullRequest
Новая
       35

Mobile Safari: элемент ссылки (<a>) над элементом видео не работает при нажатии

17 голосов
/ 10 марта 2011

Мой текущий проект - это веб-сайт html, который содержит раскрывающееся меню (javascript / jquery) и видеоплеер html5 (только видео-тег).

При нажатии на пункт меню, раскрывающееся подменю перекрывает контейнер видеоплеера (z-индекс выпадающего меню выше, чем у видеоплеера). В Safari и Chrome ссылки на записи подменю работают должным образом, но в Mobile Safari на iPad они не реагируют. Чтобы уменьшить проблему, мой минимальный пример включает элемент ссылки, который накладывается на элемент видео. 

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

Ответы [ 5 ]

19 голосов
/ 08 июня 2011

Объяснение: html5 видеоплеер поглощает сенсорные события, если элементы управления включены.

фон: меню наложилось на видео-контейнер при выпадающем меню, но ссылки на пункты меню были недоступны для клика.

решение: В качестве обходного пути я временно отключил элементы управления, удалив атрибут html video «controls» с javascript, когда меню выпадало, и повторно добавил атрибут «controls», когда меню снова выпало.

6 голосов
/ 19 марта 2013

Ваше объяснение и решение верны.Для тех, кто интересуется каким-то кодом, чтобы отключить элементы управления в выпадающем меню: 

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

Надеюсь, это поможет!

2 голосов
/ 24 апреля 2014

Я пытался просто удалить элементы управления, а затем добавить их снова, но работает только на 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);
});
2 голосов
/ 02 марта 2012

Изменение атрибута не всегда работает.Я обнаружил, что изменение непрозрачности видео до 0 работает, если вам это сойдет с рук.

0 голосов
/ 29 августа 2014

Здравствуйте. Я пытаюсь решить эту проблему с помощью встроенного видео YouTube, которое использует метод iframe для применения этого исправления.

Однако я не могу изменить свойство элементов управления для собственного элемента HTML5 Video, как в iFrame на YouTube.

Я даже пытался настроить таргетинг на элемент видео в 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"));

///6778306/mobile-safari-element-ssylki-a-nad-elementom-video-ne-rabotaet-pri-nazhatii
if (iframeVideo.prop("controls")) {
    iframeVideo.prop("controls", false);
    iframeVideo.css("opacity", 0);
}


video.remove();
});
...