ссылки 'a' не работают для тега html5 Video в iPhone Safari

Question

Я использую тег видео html5 для своего мобильного веб-сайта в браузере Safari. Тег видео работает нормально, но у меня также есть ссылки «a», которые перекрывают это видео. Я добавил эти ссылки с абсолютной позицией. Когда я нажимаю на ссылки, они не работают.

Кто-нибудь имеет какое-либо решение для этого?

Вот мой код:

CSS: .absDiv{
    background: #fff; position: absolute; top: 90px; left: 30px; padding: 4px; z-index:9999; font-size: 1.2em;
}

HTML: 
<div style="border: 1px solid #f00; position: relative;">

<div class="absDiv">I am <a href="http://www.google.co.in/">absolute</a> positioned div</div>

<video width="320" height="240"  autoplay="autoplay" loop="loop" controls="controls" tabindex="0">
    <source src="video1.ogv" /> 
    <source src="video1.mp4" />     
</video>

</div>

Я погуглил, но не смог найти помощи.

Заранее спасибо.

Answer 1

Проблема здесь в том, что в вашем видео теге есть элементы управления.В iOS, хотя видеоплеер настроен на использование элементов управления по умолчанию, он будет игнорировать все другие события касания / щелчка в видео (и из всего, что находится в верхней части видео).

Чтобы заставить работать ваши ссылки, вы можетезамените открывающий тег видео следующим:

<video width="320" height="240"  autoplay="autoplay" loop="loop" tabindex="0">

Но это означает, что у вас больше не будет кнопок воспроизведения / паузы, скруббера и т. д., поэтому вам придется либо обходиться без них, либо свернуть свои собственные.

Answer 2

Вы пытались установить z-индекс тега привязки выше, чем тег видео?

Так например

a{position:absolute; top:whatever; left:whatever; z-index:10;}
video{position:relative; z-index:1;}

Answer 3

Попробуйте добавить атрибуты webink-playsinline playsinline = "playsinline" в тег видео:

<video src="..." playsinline="playsinline" webkit-playsinline></video>