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

我试图阻止在移动Safari上包含HTML5视频元素的Web应用程序中的默认滚动。处理document.ontouchmove并致电e.preventDefault()是我发现实现这一目标的标准方式。防止在HTML5上滚动<video> iOS上的元素

除非您触摸视频元素顶部，您可以在其中开始全方位拉动页面，就好像它要滚动一样，这似乎适用于任何地方。这只会在本机视频控制强制开启时发生。如果您不包含控件属性并以可以在线播放的方式加载视频（例如在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，它不起作用。

谢谢！

来源

2011-04-05 Dan Auclair

面临相同的情况，你有没有找到任何解决方法？ – 2012-10-12 11:49:05

尝试：

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

整个窗口。

来源

2011-05-25 06:28:33

它不适用于要求的情况，面对同样的情况和视频上的触动移动 – 2012-10-12 11:48:37

你一样，我也无法阻止滚动，所以作为一种解决方法增加了一个JS功能火window.scrollTo(0, 1);每一秒钟，然后意味着用户可以在页面跳回到之前某个时间只有滚动。

来源

2011-08-19 10:16:12

在我的测试中，当忽略视频的“controls”属性时，您可以使事件生效。使用自定义格在顶部提供定制控件

例如....

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

来源

2011-09-02 15:39:13 xperiments

我想出了运行到同一个问题后一个很好的解决方案。我把它做以下工作：

//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视频工作，而不是它是否触发移动视频播放器。我希望这可以帮助，并让我知道如果你有任何问题。

来源

2014-01-22 21:02:24 Termato

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

回答

相关问题