Pyloid Pyloid - 2 months ago 6
Javascript Question

Prevent Safari Window Bouncing on iPad and Allow Scrubber to be Selected

I have a native video playing in Safari on iPad and I can't move the scrubber (video position selector). This is the code for the video.

<video id="video-area" controls>
<source src="videos/person.mp4" type="video/mp4">
</video>


There's a lot of code within the project, but I've narrowed down the code that interferes with the seeking to the code I use to prevent overscrolling (bouncing) on Safari is preventing me from seeking.

document.ontouchmove = function(event){
event.preventDefault();
}


Is there a way I can stop that code from interfering with the video, and keeping my screen from over-scrolling?

Answer

This is the general problem that comes with this particular hack. It's not a way to prevent elastic scrolling, so much as it kills all touchmove related actions.

If using this hack, you will need to filter out all the elements you want to be able to receive these events.

document.ontouchmove = function(event){
   if (event.target.tagName === 'VIDEO') {
       return;
   }
   event.preventDefault();
}