Geek Answers Handbook

Prevent scrolling HTML5 <video> element on iOS

I am trying to prevent the default scrolling in a web application that contains an HTML5 video element on Mobile Safari. Handling document.ontouchmove and calling e.preventDefault() was the standard way I found to achieve this.

This seems to work everywhere except when you touch the top of a video element where you can start pulling out the page as if it would scroll. This only happens when you force the inclusion of your own video controls. If you do not enable the control attribute and download the video so that it can be played online (for example, on the iPad or in the UIWebView interface with the ability to set InlineMediaPlayback), scrolling is prevented properly. So it looks like this has something to do with the built-in video controls (large play button) that capture the event.

Here is a far-fetched example of what I'm 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 on workarounds to completely prevent scrolling, even on video? I have already tried processing ontouchmove directly on the video element and it does not work.

Thanks!

+6
javascript html5-video mobile-safari touch
source share
4 answers

Like you, I could not prevent scrolling, since the workaround added a JS function to run window.scrollTo(0, 1); every second, which means that the user can scroll only a certain time before the page bounces.

+2
source share

In my test, when you omit the "controls" attribute of a video, you can make events work. Use the custom div at the top to provide custom controls

Example...

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

Try:

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

only for the item in question or:

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

for the whole window.

0
source share

I came up with a good solution for this, having run into the same problem. I got it to work by following these steps:

 //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, but not for mobile video player. Hope this helps and let me know if you have any questions.

0
source share

More articles:


All Articles