Question

我正在尝试阻止在移动Safari上包含HTML5视频元素的网络应用中的默认滚动。处理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

和你一样，我无法阻止滚动，因此解决方法每秒都会添加一个JS函数来触发window.scrollTo(0, 1);，这意味着用户只能在页面被跳回之前滚动一段时间。< / p>

Answer 2

在我的测试中，当省略视频的“控制”属性时，您可以使事件起作用。在顶部使用自定义div来提供自定义控件

以示例......

<video src="http://192.168.1.53/videoTester/Cuatro.mp4" id="player" width="100%" height="100%" x-webkit-airplay="allow" ></video>

Answer 3

尝试：

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

整个窗口。

Answer 4

在遇到同样的问题后，我想出了一个很好的解决方案。我通过以下方式让它发挥作用：

//Function to trigger when every half second to check if user scrolled
$(function () {
    //select video player and the current time
    var myPlayer = document.getElementById('VideoID');
    var whereYouAt = myPlayer.currentTime;
    var current;

    setInterval(function () {
        current = myPlayer.currentTime;

        if (current > (whereYouAt + 1)) {
            myPlayer.currentTime = whereYouAt; //If current 1 whole second
                                               //Set time to before scroll.
        }
        else {
            whereYouAt = current; //otherwise set where to current.
        }
    }, 500); //500 = half a second.
});

这仅适用于HTML5视频，如果它触发移动视频播放器则不适用。我希望这有帮助，如果您有任何问题，请告诉我。

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

4 个答案: