Prevenir el desplazamiento en el elemento <video> HTML5 en iOS
Estoy tratando de evitar el desplazamiento predeterminado dentro de una aplicación web que contiene un elemento de video HTML5 en Mobile Safari. Manejodocument.ontouchmove y llamando ae.preventDefault() ha sido la forma estándar en que he encontrado para lograr esto.
Esto parece funcionar en todas partes, excepto cuando toca la parte superior del elemento de video, donde puede comenzar a arrastrar la página como si fuera a desplazarse. Esto solo parece suceder cuando los controles de video nativos son forzados. Si no incluye el atributo de controles y carga el video de manera que pueda reproducirse en línea (como en el iPad o en un UIWebView con el conjunto allowInlineMediaPlayback), se impedirá el desplazamiento correctamente. Parece que tiene algo que ver con los controles de video nativos (el gran botón de reproducción) que captura el evento.
Aquí hay un ejemplo artificial de lo que estoy haciendo:
<!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>
¿Alguna idea de soluciones alternativas para prohibir completamente el comportamiento de desplazamiento, incluso en el video? Ya he intentado manejarontouchmove directamente en el elemento de video y no funciona.
¡Gracias