防止在iOS上的HTML5 <video>元素上滚动

Question

我试图阻止在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直接处理视频元素,但它不起作用.

谢谢!

Answer 1

尝试：

    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); 

对于整个窗口。