防止在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上的元素

回答

相關問題