防止在 HTML5

发布于 2024-10-30 17:15:36 字数 1086 浏览 4 评论 0原文

我试图阻止 Mobile Safari 上包含 HTML5 视频元素的 Web 应用程序内的默认滚动。处理 document.ontouchmove 并调用 e.preventDefault() 是我发现实现此目的的标准方法。

这似乎在任何地方都有效，除了当您触摸视频元素顶部时，您可以开始向四周拉动页面，就好像它要滚动一样。这似乎只有在强制启用本机视频控件时才会发生。如果您不包含controls属性并以可以在线播放的方式加载视频（例如在iPad上或在设置了allowsInlineMediaPlayback的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 但它不起作用。

谢谢！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

去了角落 2024-11-06 17:15:36

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

通过示例......

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

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>

回复收藏 0 原文

故笙诉离歌 2024-11-06 17:15:36

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

回复收藏 0 原文

清晨说晚安 2024-11-06 17:15:36

尝试：

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

针对整个窗口。

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.

回复收藏 0 原文

美羊羊 2024-11-06 17:15:36

在遇到同样的问题后，我想出了一个很好的解决方案。我通过执行以下操作使其工作：

//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 视频，如果触发移动视频播放器则无效。我希望这对您有所帮助，如果您有任何疑问，请告诉我。

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.

回复收藏 0 原文

~没有更多了~