Dan*_*air 6 javascript mobile-safari touch html5-video
我试图阻止在Mobile Safari中包含HTML5视频元素的Web应用程序中的默认滚动.处理document.ontouchmove和呼叫e.preventDefault()一直是我发现实现这一目标的标准方式.
这似乎无处不在,除非你触摸视频元素的顶部,你可以开始拉动页面,好像它将滚动.这似乎只在强制启用本机视频控件时发生.如果您不包含控件属性并以可以在线播放的方式加载视频(例如在iPad上或在设置了allowInlineMediaPlayback的UIWebView中),则会正确阻止滚动.所以它似乎与捕获事件的原生视频控件(大播放按钮)有关.
这是我正在做的一个人为的例子:
<!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直接处理视频元素,但它不起作用.
谢谢!
尝试：
element.addEventListener('touchmove', function(event) {
// Prevent scrolling on this element
event.preventDefault();
}, false);
仅针对有问题的元素或：
window.addEventListener('touchmove', function(event) {
// Prevent scrolling on this element
event.preventDefault();
}, false);
对于整个窗口。