Запретить прокрутку в элементе HTML5
Я пытаюсь предотвратить прокрутку по умолчанию в веб-приложении, которое содержит элемент видео HTML5 в Mobile Safari. Обработка document.ontouchmove и вызов e. preventDefault () - это стандартный способ, который я нашел для достижения этой цели.
Кажется, это работает везде, кроме случаев, когда вы касаетесь верхней части видеоэлемента, когда вы можете начать перетаскивать страницу, как будто он будет прокручиваться. Это происходит только тогда, когда принудительно включены встроенные элементы управления видео. Если вы не включите атрибут controls и загрузите видео таким образом, чтобы его можно было воспроизводить в режиме реального времени (например, на iPad или в UIWebView с установленным параметром allowInlineMediaPlayback), прокрутка будет предотвращена должным образом. Так что, похоже, это как-то связано с встроенными элементами управления видео (большая кнопка воспроизведения), фиксирующими событие.
Вот надуманный пример того, что я делаю:
<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Video Example</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
</head>
<body style="background: blue;">
<video src="http://cdn.kaltura.org/apis/html5lib/kplayer-examples/media/bbb_trailer_iphone.m4v" controls></video>
<script>
window.onload = function() {
document.ontouchmove = function(e) {
e.preventDefault();
}
}
</script>
</body>
</html>
Любые идеи обходных путей для полного запрета прокрутки , хоть на видео? Я' Мы уже пробовали обрабатывать ontouchmove непосредственно на элементе видео, но это не сработало.
Спасибо!