Как заблокировать элемент видео HTML5 от регистрации касания через слой на iPhone или iPod Touch? - PullRequest
3 голосов
/ 18 октября 2011

Я обнаружил это необычное и несколько раздражающее поведение, когда начинал новый проект проигрывателя HTML5 с нуля.

У меня есть очень простая веб-страница со следующими тегами:

<div style="position: relative;">
    <video id="vid" src="someVideo.mp4" width="960" height="540"></video>
    <div style="position: absolute; top: 0; left: 0; width: 960px; height: 540px; background-color: red;"></div>
</div>

Выглядит как и ожидалось - элемент VIDEO скрыт за большим красным прямоугольником, который имеет точно такие же размеры.

Однако, вопреки моим ожиданиям, я могу дотронуться до центральной области красного прямоугольника, где находится «наложение» воспроизведения, которое появляется в центре каждого HTML5-видео на iPhone или iPod Touch, чтобы запустить элемент VIDEO играя так, как будто я прикоснулся к самому элементу VIDEO.

Есть ли способ заблокировать это поведение? Это не происходит ни на iPad, ни на рабочем столе, но, к тому же, оверлей также не отображается на этих платформах с необработанным тегом VIDEO на странице.

ОБНОВЛЕНИЕ: Кажется, что оно зашло настолько далеко, что блокирует событие касания от чего-либо, расположенного непосредственно над ним. Если я попытаюсь присоединить прослушиватель событий к абсолютно позиционированному красному DIV, соответствующий обработчик событий не будет выполнен. Это действительно очень раздражает.

ОБНОВЛЕНИЕ: @Matt H - это «веб-приложение», работающее в iOS Safari. В результате тщательного тестирования я пришел к выводу, что на iPhone или iPod Touch область, в которой элемент VIDEO «находится» на физической странице, по существу зарезервирована для этого элемента, если речь идет о событиях, если они действительно видимы. Проблема, конечно, в том, что, если элемент VIDEO не отображается, вы не можете связать вызов метода play нажатием на элемент overlay. Это отстой, но я предполагаю, что это часть усилий Apple, направленных на то, чтобы не дать злоумышленникам «обмануть» пользователей, чтобы они играли в ВИДЕО, так же, как правило «без автозапуска».

1 Ответ

1 голос
/ 18 октября 2011

Вы пытались обработать и отменить сенсорное событие?

<body ontouchstart='return HandleTouch(event)'>
function HandleTouch(ev) {ev.preventDefault(); }

Я точно не знаю, сработает ли это, хотя.

...