Мобильный Safari: элемент link (<a>) над элементом видео не работает на клике

мой текущий проект - это 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="#" onclick="location.href='http://www.google.de'; return false;">click me</a>
<video src="" width="640" height="360" preload="none" controls="controls"></video>
</body>

Прикосновение к элементу ссылки на iPad не работает. Любые советы оценили, как сделать ссылку доступной для iPad!

Ответы

Ответ 1

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

фон: меню оверлеило видеоконтейнер при его сбросе, но ссылки на пункты меню не были доступны.

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

Ответ 2

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

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

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

Ответ 3

Изменение атрибута не всегда работает. Я нашел изменение непрозрачности видео на 0 работ, если вы можете с ним справиться.

Ответ 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);
});

Ответ 5

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

Однако я не могу изменить свойство элементов управления на собственном элементе видео HTML5, как в 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"));

//http://stackoverflow.com/info/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();
});