Предотвращение событий сенсорного перемещения в элементе <video>в Mobile Safari - PullRequest
Новая
       26

Предотвращение событий сенсорного перемещения в элементе <video>в Mobile Safari

2 голосов
/ 12 мая 2011

Я пишу веб-приложение для домашнего экрана с элементом видео в Mobile Safari.По соображениям удобства использования я бы предпочел, чтобы смахивание на экране не вызывало прокрутку страницы.Я могу успешно предотвратить прокрутку свайпов, используя следующий код.Однако, если пользователь пролистывает элемент видео, страница прокручивается. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>no scroll</title>
<script type="text/javascript">
window.onload = function(){
    document.addEventListener('touchmove',function(event){
        event.preventDefault();
    },false);
};
</script>
</head>
<body>
<p>anything but the video will be stationary when swiped.</p>
<video preload="auto" webkit-playsinline id="video" controls height="100" width="100">
    <source src="video.mp4" type="video/mp4" />
</video>
</body>
</html>

Я попытался добавить код, чтобы элемент видео не глотал эти события (вставленные в функцию window.onload): 

var videoEl = document.getElementById('video');
videoEl.addEventListener('touchmove',function(event){
    event.preventDefault();
},false);
videoEl.addEventListener('touchstart',function(event){
   event.preventDefault();
},false);

Есть ли обходной путь для этого?Я решаю проблему неправильно?

1 Ответ

1 голос
/ 12 мая 2011

Я бы порекомендовал поставить шайбу сверху, то есть пустой div с более высоким z-индексом, чтобы ловить события касания. Сейчас у меня нет возможности проверить, но это должно быть довольно легко.

...