iphone - Preventing touchmove events in a <video> element in Mobile Safari -
i writing home-screen web app video element in mobile safari. usability reasons, prefer swiping on screen not make page scroll. can prevent swipes scrolling using following code. however, if user swipes on video element, page scrolls.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width; height=device-height; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <title>no scroll</title> <script type="text/javascript"> window.onload = function(){ document.addeventlistener('touchmove',function(event){ event.preventdefault(); },false); }; </script> </head> <body> <p>anything video stationary when swiped.</p> <video preload="auto" webkit-playsinline id="video" controls height="100" width="100"> <source src="video.mp4" type="video/mp4" /> </video> </body> </html> i have tried adding code prevent video element swallowing events (inserted window.onload function):
var videoel = document.getelementbyid('video'); videoel.addeventlistener('touchmove',function(event){ event.preventdefault(); },false); videoel.addeventlistener('touchstart',function(event){ event.preventdefault(); },false); is there workaround this? addressing problem wrong way?
i'd recommend putting shim on top, is, blank div higher z-index catch touch events. don't have chance test now, should pretty easy try out.
Comments
Post a Comment