可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am trying to prevent the default scrolling within a web app which contains an HTML5 video element on Mobile Safari. Handling document.ontouchmove and calling e.preventDefault() has been the standard way that I've found to achieve this.

This seems to work everywhere except when you touch on top of the video element, where you can start pulling the page all around as if it is going to scroll. This only seems to happen when the native video controls are forced on. If you don't include the controls attribute and load the video in a way that it can be played in-line (such as on the iPad or in a UIWebView with allowsInlineMediaPlayback set), scrolling is prevented properly. So it seems like it has something to do with the native video controls (the big play button) capturing the event.

Here is a contrived example of what I am doing:

<!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>

Any ideas of workarounds to completely prohibit scrolling behavior, even on the video? I've already tried handling ontouchmove directly on the video element and it doesn't work.

Thanks!

回答1:

Like you, I couldn't prevent scrolling, so as a workaround added a JS function to fire window.scrollTo(0, 1); every second which then means the user can only scroll for a certain time before the page is jumped back.

回答2:

In my test, when ommiting the "controls" attribute of the video you can get the events to work. Use a custom div in top to provide custom controls

By example....

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

回答3:

Try:

    element.addEventListener('touchmove', function(event) {                                                                                                                                                                                                               
        // Prevent scrolling on this element                                                                                                                                                                                                                              
        event.preventDefault();                                                                                                                                                                                                                                           
    }, false);

for just the element in question or:

    window.addEventListener('touchmove', function(event) {                                                                                                                                                                                                               
        // Prevent scrolling on this element                                                                                                                                                                                                                              
        event.preventDefault();                                                                                                                                                                                                                                           
    }, false);

for the whole window.

回答4:

I came up with a good solution for this after running into the same issue. I got it to work by doing the following:

//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.
});

This will only work for HTML5 video and not if it triggers the mobile video player. I hope this helps and let me know if you have any questions.